websocket实现一个聊天室

上次讲了websoket的基础知识和应用插件，今天咱们来用websocket来实现一个聊天程序。先看几张界面截图：

聊天界面：

历史消息查看：

用户上线提醒：

在线体验地址：地址

功能结构图

能够看到，该聊天室主要分为三个部分：消息实时推送，聊天界面与交互实现，用户认证模块。下面讲讲这个3个模块的实现方式。

总体架构

前端：vue-cli搭建+websock客户端

后端：nodeJs+websock服务端+JWT认证

消息推送模块实现

主要用到了websock的双工通讯功能：
服务端核心代码：

const sendDataType = {
    // 发送消息
    sendMsg: 1,
    // 发送在线用户数
    userOnlineCount: 2,
    // 发送用户身份信息
    sendName: 3,
    // 发送在线用户列表
    sendUserList: 4
}
Object.freeze(sendDataType)

class WsChat {
    constructor(port = 30002) {
        this.wss = new WebSocket.Server(
            {port: port
            },
            );
        // 链接成功，初始化事件
        this.wss.on('connection', (ws, req) => {
            this.initWsEvent(ws)
        });
    }

    initWsEvent(ws) {
        //收到消息
        ws.on('message', message => {
            logger.writeInfo('message', message)
            this.onMessage(message, ws)
        });

        ws.on("close", () => {
            //将已经断开的，删除掉
            this.onClose()
        });
    }
}

上面的代码不难看出，服务端定义了一个枚举：sendDataType 来告诉客户端收到消息的类型，分别是:

1: 收到新消息
2: 收到在线用户数量的通知
3: 收到用户身份信息
4: 收到在线用户列表

客户端核心代码：

this.ws = new WebSocket("ws://127.0.0.1:8020");
this.ws.addEventListener('open', () => {
    // 向服务端发送链接通知
    this.ws.send(JSON.stringify({type: 'connection', data: {userId, token, name}}));
})
this.ws.addEventListener('message', (evt) => {
    // 收到服务端消息，根据定义的类型判断
}
this.ws.addEventListener('error', (error) => {
    // 链接失败，给出提示
    new NoticeJs({
        type: 'error',
        title: '链接失败',
        text: 'socket服务链接失败，当前属于离线状态！',
        position: 'topCenter'
    }).show()
})

客户端向服务端推送消息一样定义了枚举来让服务端区分客户端的消息类型：

changeName:表示用户发起更名请求(服务端会将新名称推送给其余用户)
connection:客户端的第一次链接(服务端会将用户的token和基本信息返回给用户)
msg:表示客户端向某一用户发送消息（服务端会将该消息发给对应的用户）

服务端和客户端相互约定好消息类型，根据不一样的类型作出不一样的响应，这样就能完成咱们的第一个核心功能--实时通信

客户端交互界面实现

该部分主要分为用户列表，用户交互，消息展现三个部分。主要是用vue来渲染的，样式部分没有用第三方的库，消息展现用到了localStorage,它们主要是：

// 缓存全部用户本地聊天记录
localStorage.setItem('ws_allMsgMap', JSON.stringify(this.allMsgMap))
// 缓存用户信息
localStorage.setItem('ws_user_info', JSON.stringify({userId, token}))
// 缓存历史用户列表
localStorage.setItem('ws_userList', JSON.stringify(this.userList))

由于本应用没有加入数据库，因此用h5的缓存技术来缓存一些用户信息,有了localStorage的功能，让咱们的应用能展现历史消息。
消息通知的显示用到了一个push.js的库，比较轻量，能够结合:animate.css使用。

用户认证模块

本应用没有登陆模块，因此须要实现一个用户认证模块，来保证用户篡改和惟一性，流程图以下：

这里用到了2个库，第一个是uuid用来生成惟一的用户id，第二个是jsonwebtoken。用来生成加密token，能够存储用户id,还能够用来校验是否被篡改和过时。
用户第一次打开的时候，服务端会返回分配的uuid和token。服务端会保存在本地，下次用户连入的时候，会将uuid和token发给服务器作验证，合法才让用户接入websocket服务，不然会被强制断开链接。

写在最后

本文主要介绍websocket实现一个简单的聊天室功能，没有接入数据库，因此是无法作持久化的，用户聊天记录和身份信息保存在用户本地，通讯过程也没有加密，仅供参考。上面也提供了核心实现代码，感兴趣的小伙伴能够本身动手尝试尝试，该聊天小程序的功能会逐渐完善，能够持续关注。下期我会将这个简单的引用使用electron将该引用打包成一个桌面应用的安装程序。
electron可使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。功能很强大，它至关因而将nodeJs和网页结合了，下次会作出具体介绍。

相关阅读：

一文看懂websocket

聊天应用在线体验

学习如逆水行舟，不进则退，前端技术飞速发展，若是天天不坚持学习，就会跟不上，我会陪着你们，天天坚持推送博文，跟你们一同进步，但愿你们能关注我，第一时间收到最新文章。

我的公众号：