node.js+websocket聊天室

大家好，我是小牧，只会 CV 的工程师，持续记录自学前端知识。今天就使用 node+websocket 做一个简单的聊天室

认识 websocket

Web Socket 是通过一个长时连接实现与服务器全双工，双向的通信；数据可以作为数据包在两个方向上传递，而无需中断连接也不要额外的 HTTP 请求，对于需要连续数据交换的服务，例如网络游戏，实时交易系统，即时通讯等，WebSocket 尤其重要。

下面是 http 与 websocket 与服务器建立连接的流程图：

websocket 的特点

1. 建立在 TCP 协议之上，服务器端的实现比较容易；
2. 与 http 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 http 协议，因此握手时不容易屏蔽，能够通过各种 http 代理服务器；
3. 数据格式比较轻量，性能开销小，通信高效；
4. 可以发送文本，也可以发送二进制数据；
5. 没有同源限制，客户端可以与任意服务器通信，完全可以取代 Ajax;
6. 协议标识符是 ws（如果加密，则为 wss，对应的是 https 协议），服务器网址是 URL。（比如：ws://example.com:80/xx/path）

直接上手（玩的就是真实）

使用的技术栈 node.js+react.js

1.创建工程

npx create-react-app chat
cd chat
npm start

删除个别文件，最终的结果是：

2、创建服务端

在目录中创建一个 server 文件夹，并新建 index.js

2. 安装 websocket

node install websocket

3. 引入 websocket 和 http 模块

4. 启动 http 服务器，进行监听，设置端口：8081

5. 初始化 websocket 服务器

两个必填参数，详情可看: README.md

6. 接收和发送

7. 启动服务器

node index.js

8. 启动成功

3、客户端聊天室

1. 用 react 的 hooks 搭建一个简单的页面

2. 在 App.js 引入聊天室

3. 运行

npm start

4. 与服务器端建立联系

关于 webSocket 事件可见： MDN

5. 添加发送事件

6. 查看效果