websocket学习记录
2023-06-13 09:16:40 时间
websocket介绍
websocket是html5新增的前后端通讯方式，通过与后端建立一个前端不主动断开，就会保持连接的通道，用来接收后端实时推送的消息。
与http请求的区别
HTTP 请求的特点是：请求-> 响应。客户端发起请求，服务端收到请求后进行响应，一次请求就完成了。也就是说，HTTP 请求必须由客户端发起，服务端才能被动响应。
但是某些场景必须要实时获取服务端消息。早期出现了轮询轮询是客户端定时向服务器发起请求，检测服务端是否有更新，如果有则返回新数据。但是弊端是请求消耗太大。客户端不断请求，浪费流量和服务器资源，给服务器造成压力。且不能保证及时。客户端需要平衡及时性和性能，请求间隔必然不能太小，因此会有延迟。
代码示例
前端发起websorket请求，代码实现:
1//创建websorket实例，并配置连接地址
2const ws = new WebSocket("ws://localhost:8080")
3//发起一次连接
4ws.onopen = function(mevt) {
5 console.log("客户端已连接")
6 ws.send("给后端传一个参数")
7}
8//实时接收后端的推送
9ws.onmessage = function(mevt) {
10 console.log("客户端收到消息: " + evt.data)
11//必要时可以断开连接
12 ws.close()
13}
14//断开连接的回调处理
15ws.onclose = function(mevt) {
16 console.log("连接关闭")
17}
18后端使用express-ws模拟ws推送:
1var express = require("express")
2var app = express()
3var wsServer = require("express-ws")
4
5wsServer(app)
6
7app.ws("/test-ws", (ws, req) => {
8 ws.on("message", msg => {
9 console.log(msg);
10 ws.send("发起开机请求")
11 setTimeout(() => {
12