websocket实现一个聊天室
2020/5/30 11:26:34
本文主要是介绍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
聊天应用在线体验
学习如逆水行舟,不进则退,前端技术飞速发展,如果每天不坚持学习,就会跟不上,我会陪着大家,每天坚持推送博文,跟大家一同进步,希望大家能关注我,第一时间收到最新文章。
个人公众号:
这篇关于websocket实现一个聊天室的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28pyqt 怎么打包整个项目-icode9专业技术文章分享
- 2024-09-28laravel Commands 创建带有参数的 Artisan 命令的步骤和示例-icode9专业技术文章分享
- 2024-09-28antd怎么实现渲染tiff图片-icode9专业技术文章分享
- 2024-09-28英文半角中划线和中文全角的中划线有什么区别-icode9专业技术文章分享
- 2024-09-28nvm npm 和node 他们之间有什么关系-icode9专业技术文章分享
- 2024-09-28Node Version Manager (nvm)使用教程-icode9专业技术文章分享
- 2024-09-28nvm命令太慢,是什么原因-icode9专业技术文章分享
- 2024-09-28Kotlin 如何增加、删除和修改 MutableStateFlow 中的值。-icode9专业技术文章分享
- 2024-09-28Kotlin的stateFlow.update 写法介绍-icode9专业技术文章分享
- 2024-09-28kotlin 怎么获取当前时间格式-icode9专业技术文章分享