Java网络编程，一对一聊天

 **这个小任务是来自于B站，他的视频名字就是“Java实现实时聊天互动程序”**

要求：就是有2个类，其中一个客户端和一个服务端。要实现从客户端发消息，不仅在客户端，而且也要在服务端也显示。实现客户端和服务端之间的简单聊天。

代码：①----->QqFu类

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import java.net.*;
public class QqFu extends JFrame implements ActionListener{
	public static void main(String[] args){
		new QqFu();	
	}
	// 说明：一个类需要页面的显示，则那个类要继承JFrame。
	// 属性
	// 文本域
	private JTextArea jta;
	// 滚动条
	private JScrollPane jsp;
	// 面板里面是文本框和按钮
	private JPanel jp;
	private JTextField jtf;
	private JButton jb ;

	BufferedWriter bw = null;
    
	// 构造器
	public QqFu(){
		
		// 初始化上面的属性
		jta = new JTextArea();
		
		// 将文本域添加到滚动条中
		jsp = new JScrollPane(jta);
		jp = new JPanel();
		jtf =new JTextField(15);
		jb = new JButton("发送");

		// 把按钮和文本框添加到面板中
        jp.add(jtf);
		jp.add(jb);

		// 把滚动条和面板添加到JFrame中去
		this.add(jsp,BorderLayout.CENTER); //这个设置在中间
		this.add(jp,BorderLayout.SOUTH); //南

		this.setTitle("qq聊天 客户端");
		this.setSize(500,500);
		this.setLocation(200, 200);
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);
        jb.addActionListener(this);

		// 回车点击事件

		jtf.addKeyListener(new KeyAdapter() {
	        public void keyTyped(KeyEvent e) {
		     if((char)e.getKeyChar()==KeyEvent.VK_ENTER) {
                 useVoid01();			 
		     }
	       }
        });



        try{
		/*******客户端 TCP协议*********/
		// 1.创建一个客户端的套接字（尝试连接）
		Socket socket = new Socket("127.0.0.1",8888);

		// 2.获取socket通道的输入流
		BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream()));
		
		// 3
        bw = new BufferedWriter(new OutputStreamWriter(socket.getOutputStream()));

		String line = null;
		while((line = br.readLine()) !=null){
			jta.append(line + "\n");
		}
		// 3. 获取输出流

		// 4.关闭流
		socket.close();

		/******************************/
		}catch(Exception e){
			e.printStackTrace();
		}
	}
	public void actionPerformed(ActionEvent e){
		useVoid01();
	}
	
	public void useVoid01(){
		// 1.获取文本框中需要发送的内容
		String text = jtf.getText();
		// 2. 拼接内容
		text = "客户端对服务端说：" + text;
		// 3.自己显示
		jta.append(text + "\n");
		try{
		// 4.发送
			bw.write(text);
			bw.newLine(); // 换行 
			bw.flush();  // 刷新
		// 5.清空
		    jtf.setText("");

		}catch(IOException e1){
			e1.printStackTrace();
		}
	}
	//行为
}

代码：②----->QqMain类

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
import java.io.*;
import java.net.*;
public class QqMain extends JFrame implements ActionListener{
	public static void main(String[] args){
		new QqMain();	
	}
	// 说明：一个类需要页面的显示，则那个类要继承JFrame。
	// 属性
	// 文本域
	private JTextArea jta;
	// 滚动条
	private JScrollPane jsp;
	// 面板里面是文本框和按钮
	private JPanel jp;
	private JTextField jtf;
	private JButton jb ;

	BufferedWriter bw  = null;
    
	// 构造器
	public QqMain(){
		
		// 初始化上面的属性
		jta = new JTextArea();
		
		// 将文本域添加到滚动条中
		jsp = new JScrollPane(jta);
		jp = new JPanel();
		jtf =new JTextField(15);
		jb = new JButton("发送");

		// 把按钮和文本框添加到面板中
        jp.add(jtf);
		jp.add(jb);

		// 把滚动条和面板添加到JFrame中去
		this.add(jsp,BorderLayout.CENTER); //这个设置在中间
		this.add(jp,BorderLayout.SOUTH); //南

		this.setTitle("qq聊天 服务端");
		this.setSize(500,500);
		this.setLocation(200, 200);
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setVisible(true);

		/***********TCP协议*************/
		jb.addActionListener(this);  // 这是按钮点击使用
		// 回车键的监听事件 在接口KeyListener中
        //jtf.addKeyListener(this);


        jtf.addKeyListener(new KeyAdapter() {
	        public void keyTyped(KeyEvent e) {
		     if((char)e.getKeyChar()==KeyEvent.VK_ENTER) {
				 useVoid();
		     }
	       }
        });

		try{
		// 1.创建一个服务端的套接字
		ServerSocket serverSocket = new ServerSocket(8888);

		//2.等待客户端的连接
		Socket socket = serverSocket.accept();

		// 3.获取socket通道的输入流(输入流的读取方式为一行一行的读取方式 ----> readLine())
		BufferedReader br = new BufferedReader(new InputStreamReader(socket.getInputStream()));

		// 4.获取通道的输入流(也是一行一行的写出  BufferedWriter ->newLine())
        // 当用户点击“发送”按钮的时候才会，写出数据
		bw = new BufferedWriter(new OutputStreamWriter(socket.getOutputStream()));
		String line = null;
		while((line = br.readLine()) !=null){
			// 将读取的数据拼接到文本域中显示
			jta.append(line + "\n");
		}

		
		// 5.关闭socket通道
		serverSocket.close();
        
		}catch(IOException e){
			e.printStackTrace();
		}

		/************************/


	}
	// 点击按钮所实现的方法
	public void actionPerformed(ActionEvent e){
		useVoid();
	}

	public void useVoid(){
		// 1.获取文本框中的内容
		String text = jtf.getText();
		text = "服务端对客户端说：" + text;
		// 自己显示
		jta.append(text + "\n");
		// 2.发送
		try{
			// 4.发送
			bw.write(text);
			bw.newLine(); // 换行 
			bw.flush();  // 刷新
			// 5.清空文本框
			jtf.setText("");
		}catch (IOException e1){
			e1.printStackTrace();
		}
	}

    
	/*public void KeyPressed(KeyEvent e){
		//回车键
		System.out.println("按钮数字");
	}
	
	public void KeyTyped(KeyEvent e){
	}
    
	public void KeyReleased(KeyEvent e){
	}*/
	//行为
}

效果展示：

这里面的什么通信协议我就是照着抄的，不过在这个里面还是可以学到一些东西的，对于swing的使用吧。里面的获取输入的内容，和输出获取的内容，还用那个清空。

前言
上篇我们讲了如何使用vue + websocket + nodejs搭建一个聊天室，
下面我们在该聊天室基础上增加了一对一单聊功能。支持一对一单聊，一对多群聊。

先看效果：

大概思路：
主要通过参数brige区分是群聊还是单聊：
brige为空是群聊；
brige包含了当前登录人的uid还有聊天对应人的uid，是单聊。

核心代码：

// 单聊
if (obj.brige && obj.brige.length) {
        obj.brige.forEach(item => {
            conns[item].sendText(JSON.stringify(obj))
        })
        return;
    }
// 群聊(目前是默认写死的一个群)
server.connections.forEach(function (conn) { // 注意：这里是server,不是ws
        conn.sendText(JSON.stringify(obj)) // 注意：这里得转成字符串发送过去，不然会报错。
    })   

流程图如下：

上代码：

服务端：

const ws = require('nodejs-websocket')
const moment = require('moment')
let users = []
let conns = {}

function broadcast(obj) {
    // 单聊
    if (obj.brige && obj.brige.length) {
        obj.brige.forEach(item => {
            conns[item].sendText(JSON.stringify(obj))
        })
        return;
    }
    server.connections.forEach(function (conn) {
        conn.sendText(JSON.stringify(obj))
    })
}
const server = ws.createServer(function (conn) {
    conn.on('text', function (data) {
        const obj = JSON.parse(data)
        switch (obj.type) {
            case 1:
                {
                    // 将所有uid对应的连接都保存到一个对象里
                    conns[obj.uid] = conn;
                    
                    // 不存在uid对应的用户（不是本人），才会添加，避免重复
                    const isSelf = users.some(m => m.uid === obj.uid)
                    console.log(isSelf, data.uid, users, '所有用户')
                    if (!isSelf) {
                        users.push({
                            nickname: obj.nickname,
                            uid: obj.uid
                        })
                    }
                    broadcast({
                        type: 1,
                        nickname: obj.nickname,
                        uid: obj.uid,
                        msg: `${obj.nickname}进入了聊天室`,
                        date: moment().format('YYYY-MM-DD HH:mm:ss'),
                        users,
                        brige: obj.brige
                    })
                }
                break;
            case 2:
                // 聊天时候不需要users，type为1已经处理了
                broadcast({
                    type: 2,
                    nickname: obj.nickname,
                    uid: obj.uid,
                    msg: obj.msg,
                    users,
                    date: moment().format('YYYY-MM-DD HH:mm:ss'),
                    brige: obj.brige
                })
                break;
        }
    })

    conn.on('close', function (e) {
        console.log(e, '服务端连接关闭')
    })

    conn.on('error', function (e) {
        console.log(e, '服务端异常')
    })

}).listen(8888)
console.log('服务端已开启')

客户端：

视图层：（由之前的class为right改为现在web-im。多加了左侧菜单栏，其他地方跟上篇一致）

<div class="web-im">
      <div class="left">
        <div class="user" @click="triggerGroup()">
          群一
        </div>
        <div class="user" v-for="(itm, idex) in users" :key="idex" v-show="itm.uid !== uid" @click="triggerUser(itm)">
          <span>{{itm.nickname}}</span>
          </div>
      </div>
      <div class="right">
        <div class="body im-record" id="im-record">
          <p>{{title}}</p>
          <div class="ul">
            <!-- user为靠右展示样式，如果uid一致说明是本人 -->
            <div class="li" :class="{user: item.uid == uid}" v-for="(item, index) in currentMessage" :key="index">
              <template v-if="item.type===1">
                <p class="join-tips">{{item.msg}}</p>
              </template>
              <template v-else>
                <p class="message-date">
                  <span class="m-nickname">{{item.nickname}}</span> {{item.date}}</p>
                <p class="message-box">{{item.msg}}</p>
              </template>
            </div>
          </div>
        </div>
        <div class="im-footer">
          <el-input placeholder="请输入你想说的内容..." v-model="msg" class="im-footer_inp"/>
          <el-button class="im-footer_btn" type="primary" @click="send">发送</el-button>
        </div>
      </div>
    </div>

逻辑层：（之前是聊天框数组是messageList，现在改成currentMessage）
(注：…表示代码跟之前一致，这里不再多写)

  computed: {
    // 筛选当前brige一致的放到一个聊天数组里，区分单聊和群聊
    currentMessage () {
      const vm = this
      let data = this.messageList.filter(item => {
        return item.brige.sort().join('') === vm.brige.sort().join('')
      })
      return data
    }
  },
  
  ...
  
  // 发送信息给客户端
    sendMessage (type, msg) {
      const data = {
        uid: this.uid,
        type,
        nickname: this.nickname,
        msg,
        users: this.users,
        brige: this.brige
      }
      this.ws.send(JSON.stringify(data))
      this.msg = ''
    },
	
	// 切换到单聊
    triggerUser (itm) {
      this.brige = [this.uid, itm.uid]
      this.title = `和${itm.nickname}聊天`
    },
	
	// 切换到群聊
    triggerGroup () {
      this.brige = []
      this.title = '群聊'
    },

样式层：

.web-im {
  display: flex;
}
  .left {
    width: 200px;
    border: 1px solid #ccc;
    .user {
      width: 100%;
      height: 36px;
      padding-left: 10px;
      border-bottom: 1px solid #ccc;
      line-height: 36px;
      .msgtip {
        display: inline-block;
        width: 20px;
        height: 20px;
        background: #46b0ff;
        margin-left: 5px;
        text-align: center;
        color: #fff;
        line-height: 20px;
        border-radius: 50%;
      }
    }
    }
  .right {
      position: relative;
      flex: 1;
      height: 600px;
      margin: 0 auto;
      .im-title {
        height: 30px;
        padding-left: 20px;
        border-bottom: 1px solid #ccc;
        line-height: 30px;
        font-size: 16px;
      }
      .im-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        width: 100%;
        .im-footer_inp {
          width: 80%;
        }
        .im-footer_btn {
          width: 20%;
        }
      }
      
      .im-record {
        width: 100%;
        height: 540px;
        overflow-y: auto;
        .join-tips {
          position: relative!important;
          display: block;
          width: 100%;
          left: 0!important;
          transform: none!important;
          color: #cccccc;
          font-size: 15px;
          text-align: center;
        }
        .li {
          position: relative;
          margin-bottom: 15px;
          text-align: left;
          color: #46b0ff;
          &:after {
            content: '';
            display: block;
            clear: both;
          }
          .message-date {
            font-size: 16px;
            color: #b9b8b8;
          }
          .m-nickname {
            color: #46b0ff;
          }
          &.user {
            text-align: right;
          }
        }
        .message-box {
          line-height: 30px;
          font-size: 20px;
        }
      }
    }

参考链接：Nodejs + WebSocket + Vue 一对一、一对多聊天室 – 第三章

直播行业不断的演变到现在，手机直播、直播+短视频、微信小程序、短视频、一对一视频交友源码都在不断的占据市场和进行融资上市。

传统直播模式并不是所有观众都会打赏主播,但是一对一采用的是计时收费或者先付费的方式,相当于主播有了一定的“底薪”，而用户照旧可以打赏主播，增加了主播和平台的收益,减轻了平台带宽的费用。

一对一视频交友源码相较于直播系统源码来讲，除了社交性、互动性、私密性及变现能力上更强之外，在应用的开发语言、系统框架及搭建部署内容方面与传统直播平台并没有太大的差别，无非就是一对一聊天系统的开播机制较为特别。

一对一视频交友源码也需要全面兼容Android及iOS终端，因此开发语言方面也用到了Java和objective-c。至于服务端的开发语言，则可以选择Java或者PHP。一对一视频交友源码包含的业务服务集群则主要有：socket集群，Redis集群，Mysql集群（支持主从读写分离）。当然也需要用到云存储及流媒体等三方服务。从这些方面来看，一对一视频交友源码的开发搭建与传统直播系统开发搭建并没有什么不同。

如果仅仅只是功能及变现方式上的差别，并不能说一对一视频交友源码是传统直播源码的升级版。但一对一聊天系统可以看作是直播系统在社交细分领域的全新应用，因为一对一聊天系统的模式私密社交性更强，同时也可以将一对一聊天系统单独作为功能模块嵌入很多社交平台中。

如果想入住一对一聊天系统市场一定要快速的上线运营，这个时候就要找专业做直播的合作商、程序代码扎实稳定、技术一对一对接、售后无忧：最好是实地公司当面考察。