WebSocket 原理浅析与实现简单聊天

setInterval(function() {  fetch(url).then((res) => {      // success code  })}, 3000);

function async() {    fetch(url).then((res) => {    	async();    	// success code	}).catch(() => {		// 超时        async();	})}

let ws = new WebSocket('ws://localhost:9000');

Accept-Encoding: gzip, deflate, brAccept-Language: zh-CN,zh;q=0.9Cache-Control: no-cacheConnection: Upgrade	// 表示该连接要升级协议Cookie: _hjMinimizedPolls=358479; ts_uid=7852621249; CNZZDATA1259303436=1218855313-1548914234-%7C1564625892; csrfToken=DPb4RhmGQfPCZnYzUCCOOade; JSESSIONID=67376239124B4355F75F1FC87C059F8D; _hjid=3f7157b6-1aa0-4d5c-ab9a-45eab1e6941e; acw_tc=76b20ff415689655672128006e178b964c640d5a7952f7cb3c18ddf0064264Host: localhost:9000Origin: http://localhost:9000Pragma: no-cacheSec-WebSocket-Extensions: permessage-deflate; client_max_window_bitsSec-WebSocket-Key: 5fTJ1LTuh3RKjSJxydyifQ==		// 与响应头 Sec-WebSocket-Accept 相对应Sec-WebSocket-Version: 13	// 表示 websocket 协议的版本Upgrade: websocket	// 表示要升级到 websocket 协议User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36

Connection: UpgradeSec-WebSocket-Accept: ZUip34t+bCjhkvxxwhmdEOyx9hE=Upgrade: websocket

GUID = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";    //  一个固定的字符串accept = base64(sha1(key + GUID));	// key 就是 Sec-WebSocket-Key 值，accept 就是 Sec-WebSocket-Accept 值

function connectWebsocket() {    ws = new WebSocket('ws://localhost:9000');    // 监听连接成功    ws.onopen = () => {        console.log('连接服务端WebSocket成功');        ws.send(JSON.stringify(msgData));	// send 方法给服务端发送消息    };
    // 监听服务端消息(接收消息)    ws.onmessage = (msg) => {        let message = JSON.parse(msg.data);        console.log('收到的消息：', message)        elUl.innerHTML += `<li class="b">小秋：${message.content}</li>`;    };
    // 监听连接失败    ws.onerror = () => {        console.log('连接失败，正在重连...');        connectWebsocket();    };
    // 监听连接关闭    ws.onclose = () => {    	console.log('连接关闭');    };};connectWebsocket();

const path = require('path');const express = require('express');const app = express();const server = require('http').Server(app);const WebSocket = require('ws');
const wss = new WebSocket.Server({ server: server });
wss.on('connection', (ws) => {
  // 监听客户端发来的消息  ws.on('message', (message) => {    console.log(wss.clients.size);    let msgData = JSON.parse(message);    if (msgData.type === 'open') {      // 初始连接时标识会话      ws.sessionId = `${msgData.fromUserId}-${msgData.toUserId}`;    } else {      let sessionId = `${msgData.toUserId}-${msgData.fromUserId}`;      wss.clients.forEach(client => {        if (client.sessionId === sessionId) {          client.send(message);	 // 给对应的客户端连接发送消息        }      })    }  })
  // 连接关闭  ws.on('close', () => {    console.log('连接关闭');  });});

setInterval(() => {    ws.send('这是一条心跳包消息');}, 60000)