前言：
今天就是复习回顾一下websocket，之前有个AI项目使用到了这个，有点久远了，回顾一下大致过程和难点。
一些知识点：
1.单工，半双工，全双工
单工：
数据只能沿着一个方向传递，例如电视广播等。
优点：实现简单
缺点：传输效率低
半双工：
数据可以在双方之间进行传递，但是不能同时进行，必须有个 发送/接收 角色的转换，一方发送完成另一方才能发送。比如对讲机。
全双工：
数据可以同时在两个方向上传输，通信的两个设备之间可以同时的收发消息，无需等待对方完成，极大地提高了数据的传输效率，典型用例就是电话。
websocket实战：
服务端创建websocket服务
创建node项目，安装相关依赖
npm init -y npm install express npm install wsconst WebSocket = require('ws'); const PORT = 8080; const wss = new WebSocket.Server({ port: PORT }); const clients = new Map();wss.on('connection', function connection(ws) {console.log('Client connected');ws.on('message', function incoming(message) {const data = JSON.parse(message);let targetUser = data.toUser// 如果客户端之前没有存储在 clients Map 中，则存储客户端连接if (!clients.has(data.user)) {clients.set(data.user, ws);}console.log(clients.keys())// 将格式化后的消息发送给客户端const formattedMessage = `${data.user}: - ${data.time}<br>${data.message}`;if (clients.has(targetUser)) {ws.send(formattedMessage);const clientSocket = clients.get(targetUser);// 检查连接是否已经打开if (clientSocket.readyState === WebSocket.OPEN) {// 发送消息给目标用户clientSocket.send(formattedMessage);} else {clientSocket.send(`连接到用户 ${targetUser} 的WebSocket已关闭。`);}} else {ws.send(`用户 ${targetUser} 不在线或未连接到WebSocket服务器。`);}console.log('Received:', formattedMessage);});// 当完成后释放连接回连接池// webSocketPool.releaseConnection(connection); });console.log('WebSocket server is running on port 8080'); console.log(`WebSocket 服务器正在监听 127.0.0.1:${PORT}`);客户端编写连接代码
<!DOCTYPE html> <html><head><meta charset='utf-8'><title>前端学习</title><style>* {margin: 0px;padding: 0px;}</style> </head><body>写一个聊天显示的窗口，以及信息发送输入框和发送按钮<div id='chat' style="display: flex;justify-content: space-around;"><div class="box1"><div id='user1_messages' style="width: 600px;height: 300px;border:1px solid black"><h1>WebSocket1 user:<span id="user1_h1" style="color: rgb(232, 154, 66);"></span></h1></div><input type='text' id='messageInput1' autocomplete='off' placeholder='Type your message here...'><button id='sendButton1'>Send</button></div><div class="box2"><div id='user2_messages' style="width: 600px;height: 300px;border:1px solid black"><h1>WebSocket2 user:<span id="user2_h1" style="color: rgb(232, 154, 66);"></span></h1></div><input type='text' id='messageInput2' autocomplete='off' placeholder='Type your message here...'><button id='sendButton2'>Send</button></div></div><script type='text/javascript'>let data = [{user: 'xhc',message: '',time: '',toUser:''}, {user: 'slj',message: '',time: '',toUser:''},{user: 'aaa',message: '',time: '',toUser:''}]let mess1 = document.getElementById('user1_messages');let mess2 = document.getElementById('user2_messages');let user1_h1 = document.getElementById('user1_h1');user1_h1.innerHTML = `${data[0].user}`let input1 = document.getElementById('messageInput1');let input2 = document.getElementById('messageInput2');let user2_h1 = document.getElementById('user2_h1');user2_h1.innerHTML = `${data[1].user}`let send1 = document.getElementById('sendButton1');let send2 = document.getElementById('sendButton2');const URL = 'ws://localhost:8080'const connect1 = () => {// 创建 WebSocket 连接const socket = new WebSocket(URL);// 当连接打开时执行的操作socket.onopen = function (event) {console.log('WebSocket1 连接已建立');data[0].message = input1.valuedata[0].time = new Date().toLocaleString()data[0].toUser = 'slj'// 发送消息到服务器socket.send(JSON.stringify(data[0]));input1.value = '';};// 当接收到消息时执行的操作socket.onmessage = function (event) {let reply = event.datamess1.innerHTML = `${mess1.innerHTML} <br>${reply}`;console.log('来自服务器的消息1：', reply);};// 当连接关闭时执行的操作socket.onclose = function (event) {mess1.innerHTML = 'WebSocket1 连接已关闭'console.log('WebSocket1 连接已关闭');};}send1.addEventListener('click', connect1)const connect2 = () => {// 创建 WebSocket 连接const socket = new WebSocket(URL);// 当连接打开时执行的操作socket.onopen = function (event) {console.log('WebSocket2 连接已建立');data[1].message = input2.valuedata[1].time = new Date().toLocaleString()data[1].toUser = 'xhc'// 发送消息到服务器socket.send(JSON.stringify(data[1]));input2.value = '';};// 当接收到消息时执行的操作socket.onmessage = function (event) {mess2.innerHTML = `${mess2.innerHTML} <br>${event.data}`;console.log('来自服务器的消息2：', event.data);};// 当连接关闭时执行的操作socket.onclose = function (event) {mess2.innerHTML = 'WebSocket2 连接已关闭'console.log('WebSocket2 连接已关闭');};}send2.addEventListener('click', connect2)</script> </body></html>
Qt概述)
 和 path.resolve())
