深入浅出WebSocket(实践聊天室demo)

news2024/11/24 7:54:39

文章目录

- 什么是WebSocket?
- - WebSocket连接过程
- WebSocket与Http的区别
- 重连机制
- - 完整代码
  - 使用方法
- 心跳机制
- 实现聊天室demo(基于Socket.io)
- 参考文章、视频
- 小广告~

什么是WebSocket?

在这里插入图片描述

WebSocket 是一种在单个TCP连接上进行全双工通信的协议（计算机网络应用层的协议）

在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。（维基百科）

特点：

与HTTP协议有良好的兼容性，默认端口也是80和443，握手阶段采用HTTP协议
建立在TCP协议之上，服务端的实现比较容易

WebSocket连接过程

建立握手
客户端发起HTTP请求，请求头中含有

Connection: Upgrade
Upgrade: Websocket
Sec-WebSocket-Key:  xxx // 提供给服务器来验证是否收到一个有效的WebSockets请求
Sec-WebSocket-Version: xxx  // 版本

服务器收到之后，明白要升级websocket连接。向客户端发送101状态码的响应

101 Switching Protocols
Connection: Upgrade
Upgrade: Websocket
Sec-WebSocket-Accept: xxx

之后就可以进行双端通信

WebSocket与Http的区别

在这里插入图片描述

二者都是基于TCP，都是应用层协议。但是websocket只是在建立握手时，数据是通过HTTP传输的。

重连机制

目的是防止WebSocket，断开连接时，能主动重连(区分主动断开，不进行重连)

完整代码

// 订阅发布--EventDispatcher
class EventDispatcher {
   
    listeners= {
   };
    addEventListener(type, listener) {
     // 收集依赖
        if (!this.listeners[type]) {
   
            this.listeners[type] = [];
        }
        if (this.listeners[type].indexOf(listener) === -1) {
   
            this.listeners[type].push(listener);
        }
    }
    removeEventListener(type) {
     // 清空依赖
        this.listeners[type] = [];
    }
    dispatchEvent(type, data) {
     // 循环执行callback
        const listenerArray = this.listeners[type] || [];
        if (listenerArray.length === 0) return;
        listenerArray.forEach(listener => {
   
            listener