JavaScript WebSocket实现实时双向聊天_Javascript

软件要做一个聊天功能，一般来说是要接入其他的接口，但是因为自己之前听说过没用过websocket，所以打算带薪摸鱼，好好的研究一下websocket。

一、搭建websocket服务器

我软件后端使用的nodejs，所以我们这次也用nodejs来做后端，方便之后的接入

1、搭建服务器

我们先引入ws库和http库，把websocket服务搭建起来

const websocket = require('ws');
const http = require('http');
const url = require('url');
const server = http.createserver((req, res) => {
    res.writehead(200);
    res.end('websocket server is running.');
});

2、初始化websocket服务器

我们需要将websocket服务绑定到我们的http服务器上

const wss = new websocket.server({ server });

3、客户映射

使用map的数据结构来存储以连接的用户及其对应的客户端

const connectedusers = new map();

4、事件处理

连接事件

因为我们的聊天是单对单的，而websocket是广播（一对多）传输的，所以我们可以使用usera和userb的用户名来做成连接，只有usera和userb进入此聊天室。

  wss.on('connection', (ws, req) => {
      const query = url.parse(req.url, true).query;
      const userida = query.usera;
      const useridb = query.userb;
      connectedusers.set(userida, ws);
      connectedusers.set(useridb, ws);
      // 这里添加其他逻辑，比如我这里是将usera和userb从url里面分离，并且将id和web socket客户端关联起来，这里也可以做一下用户认证之类的操作
  });

关闭事件

关闭事件是指的有用户断开连接时，就从映射中移除用户相应的id

  ws.on('close', () => {
      console.log(`connection closed for users ${userida} and ${useridb}.`);
      connectedusers.delete(userida);
      connectedusers.delete(useridb);
  });

错误事件

这里就是记录了在连接期间发生的任何错误

  ws.on('error', (message) => {
      console.error(`error occurred for users ${userida} and ${useridb}:`, err);
  });

消息接收

这个事件就是在连接过程中用户在广播中发送的消息，我们将他解析成json内容（因为我这里做的单对单，所以数据中包含了sender、receiverid、content，可以使用这种方式来查找接受者，并且将消息广播给接受者）

  ws.on('message', (message) => {
      const datamessage = message.tostring()
      const data = json.parse(datamessage)[0]
      const senderid = data.sender;
      const receiverid = data.receiverid;
      const content = data.content;
      // 广播消息给接收方
      const receiverws = connectedusers.get(receiverid);
      if (receiverws) {
          receiverws.send(json.stringify({ sender: senderid, content, receiver:receiverid }));
      } else {
          console.warn(`receiver ${receiverid} is not connected.`);
      }
  });

5、websocket！启动！

最后，我们只要制定监听端口，启动websocket服务器即可

server.listen(3000, () => { console.log('websocket server listening on port 3000.'); });

二、前端uniapp应用

我这里使用uniapp制作了一个基础的分屏，左边模拟a用户，右边模拟b用户

左边使用messagea来存储消息，右边使用messageb来存储消息（其实也可以把他们两个合成一个，但是这里是分屏演示，如果合成一个那么即时通讯的功能就不太显著了）

<template>
    <view class="content">
        <view class="a">
            <view class="text">
                <div v-for="(item, index) in messagesa" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输入文本" @input="inputa" :value="inputav" />
            <button @click="suma">发送</button>
        </view>
        <view class="b">
            <view class="text">
                <div v-for="(item, index) in messagesb" :key="index">
                    {{item.sender}}:{{item.content}}
                </div>
            </view>
            <input class="input" type="text" placeholder="请输入文本" @input="inputb" :value="inputbv" />
            <button @click="sumb">发送</button>		
        </view>
    </view>
</template>

data() {
    return {
        inputav: '',//a用户输入
        inputbv: '',//b用户输入
        messagesa:[],//a用户的消息列表
        messagesb: [],//b用户的消息列表
        url: 'ws://127.0.0.1:3000',//使用ws连接连接到websocket服务器
        socket: null,//socket实例
        usera: 'a',//a用户的id
        userb: 'b',//b用户的id
    }
},

//初始化，在进入软件后便处理url连接，将a用户和b用户的id放入到url连接中（此方法在初始化页面的时候就要进行调用）
//并且在两个用户连接到服务器中绑定消息的回调函数，使得有任意一个用户发送消息之后都会接受到消息
enter() {
    let url = `${this.url}?usera=${this.usera}&userb=${this.userb}`;
    this.connect(url);
    uni.onsocketmessage(this.onsocketmessage（）); // 绑定消息接收回调
},
//连接方法，此方法是在用户在进入页面中就调用的，让两个用户连接到websocket服务器中
connect(url) {
    this.socket = uni.connectsocket({
        url,
        success() {
            console.log('websocket连接成功');
            uni.onsocketopen(() => {
                console.log('websocket连接已打开！');
            });
        },
        fail(err) {
            console.error('websocket连接失败', err);
        }
    });
},
//用户a发送消息的事件
suma() {
    if (this.socket) {
        //将消息中带上发出人，接收人，确保信息无误
        this.messagesa.push({
            sender: this.usera,
            content: this.inputav,
            receiverid: this.userb
	})
        let data = json.stringify(this.messagesa)
        uni.sendsocketmessage({
            data
        });
        this.inputav = ''
    } else {
	console.log('连接失败');
    }
},
//用户b发送消息的事件
sumb() {
    if (this.socket) {
        this.messagesa.push({
            sender: this.userb,
            content: this.inputbv,
            receiverid: this.usera
        })
	let data = json.stringify(this.messagesa)
	uni.sendsocketmessage({
            data
        });
	this.inputbv = ''
    } else {
        console.log('连接失败');
    }
},
//获取消息事件，在任意用户发送消息之后，前端可以监听到消息的接受，我们只需要将数据进行处理即可
//因为用户的显示是用的messagea/messageb，所以我们可以通过不同的接收人来对不同的数据进行处理
onsocketmessage(res) {
    let data = json.parse(res.data)
    let sender = data.sender
    let content = data.content
    let receiver = data.receiver
    if(receiver == this.usera){
        this.messagesa.push({
            sender,
            content,
            receiverid
	})
    }else if(receiver == this.userb){
	this.messagesb.push({
            sender,
            content,
            receiverid
        })
    }
},