Websocket：vue + node 实现实时通信

说到通信，一般我会想到两种方式：轮询和WebSocket。
轮询其实就是在相同的时间间隔内对后端反复进行接口请求。
下面主要说一下WebSocket的实现，简单实现一个聊天室。

一、案例使用的相关技术

1. 前端

这里使用Vite配合浏览器的WebSocket。
注意：有的浏览器不兼容WebSocket

2. 后端

这是使用Node

二、 Demo实现

前端部分（Vite）

1. 初始化项目

npm init vue@latest（我们勾选一下路由—router）

2. 我们做两个页面

分别是登录页Login/index.vue和聊天窗口Chat/index.vue

3. 编写路由

这里我简单添加了一个路由守卫

4. 编写登录页

验证成功后把登录人的姓名保存

6. 聊天页面的书写

首先我们生命两个变量分别用来存储用户输入的信息和后台返回给我们的消息我们存在一个数组里方便我们通过ul>li渲染

7. 初始化WebSocket

通过new WebSocket('ws:localhost:8000')，我这里指定的后端端口是8000，它有四个事件，分别是onopen、onmessage、onclose、onerror。这里我们主要使用到onmessage。因为后端返回给前端是Blob，所有这里我进行了处理。

8. 实现一下发送按钮

后端部分（Node）

1. 初始化项目

npm init -y

2. 安装依赖

npm install ws

3. 代码书写

这里我们主要使用到connection事件，返回一个带参数的回调（callback），回调参数监听message事件。通过server.clients把事件广播出去，完成实时通信。

总结

WebSocket对于每一个前端开发人员来说是必须要掌握的，以前遇到此类问题我会使用轮询。但轮询有它自己的缺点，这里不进行赘述，希望自己能越来越好，也希望我写的笔记能给解开你的燃眉之急。