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

本文主要是介绍前端开发——熟悉WebSocket（包含示例），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

最近在开发中需要调用第三方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.valueconsole.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>