前端开发——熟悉WebSocket（包含示例）

news2024/9/23 13:23:03

最近在开发中需要调用第三方API，现在大家的API基本上都是使用WebSocket来进行的，前端也必须来学一手了

什么是WebSocket

参考：https://blog.csdn.net/L2043524156/article/details/139271715

有如下四个好处：

双向通信：既可以是客户端向服务端发起请求，也可以是服务端向客户端发起请求

持久链接：在没有执行断开链接操作，websocket连接会一直保持，不必重复请求连接

低延迟：其实是第二点带来的好处

轻量级：暂时没找到权威的答案，一说为：WebSocket 协议的数据头部相对较小

WebSocket的工作流程

1.首先需要一个node框架开启一个webSocket服务，得到一个webSocket地址

2.前端通过该地址创建WebSocket实例，向服务端发起请求建立连接

3.连接建立过程中双方可以发送消息，通过类似于生命周期钩子的回调函数处理各种事件

4.通过显式调用close方法或者刷新和关闭网页来关闭WebSocket连接

代码实例

后台服务

// websocket.js
const WebSocket = require("ws");

const PORT = 8080;
const wws = new WebSocket.Server({
  port: PORT,
});
let myKey = 1;
wws.on("connection", function connection(ws) {
  console.log("链接建立");

  // 发送初始消息
  ws.send("66666666666666666");

  // 受到新收到消息
  ws.on("message", function (msg) {
    const msgs = msg.toString("utf8");
    if (msgs === "key") {
      console.log("接收到指令,返回结果");
      ws.send(myKey);
      myKey += 1;
    } else {
      console.log("默认日志打印", msgs);
    }
  });
  ws.on("close", function bey() {
    console.log("再见!");
  });
  ws.on("error", function error(err) {
    console.error("WebSocket错误:", err);
  });
});

console.log("websocket server running in localhost:" + PORT);

// 服务端任务
/* 
1.(GET)搭建node端 WebSocket服务
2.(GET)服务端发送消息
3.(TODO)服务端错误处理
4.(TODO)服务端端开链接
*/

前端页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Test</title>
</head>

<body>
    <div id="root">
        <input id="text" type="text">
        <input id="submit" type="submit" name="">
    </div>
    <script>
        const submitBtn = document.getElementById('submit')
        const txt = document.getElementById('text')


        const socket = new WebSocket("ws://localhost:8080");
        // 添加消息监听功能
        // socket.addEventListener('message', function (msg) {
        //     console.log('受到服务器发送的消息:' + msg);
        // })
        socket.onopen = function () {
            console.log('链接成功');
        }
        socket.onerror = function (event, e) {
            console.log('链接失败' + event.data);
        }
        socket.onmessage = function (msg) {
            console.log('接收到消息' + msg.data);
        }
        socket.onclose = function () {
            console.log('链接关闭');
        }

        submitBtn.addEventListener('click', function () {
            const msg = txt.value
            console.log('文本内容', msg);
            socket.send(msg)
            txt.value = ''
        })
        console.log('打印默认属性',
            '\n连接所传输二进制数据的类型:', socket.binaryType,
            '\n已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数', socket.bufferedAmount,
            '\n服务器已选择的扩展值', socket.extensions,
            '\n服务器端选中的子协议的名字', socket.protocol,
            '\n链接状态', socket.readyState,
            '\n构造函数创建WebSocket实例对象时URL的绝对路径', socket.url);

    </script>
</body>

</html>