websocket介绍
websocket是html5新增的前后端通讯方式,通过与后端建立一个前端不主动断开,就会保持连接的通道,用来接收后端实时推送的消息。
与http请求的区别
HTTP 请求的特点是:请求-> 响应。客户端发起请求,服务端收到请求后进行响应,一次请求就完成了。也就是说,HTTP 请求必须由客户端发起,服务端才能被动响应。
但是某些场景必须要实时获取服务端消息。早期出现了轮询轮询是客户端定时向服务器发起请求,检测服务端是否有更新,如果有则返回新数据。但是弊端是请求消耗太大。客户端不断请求,浪费流量和服务器资源,给服务器造成压力。且不能保证及时。客户端需要平衡及时性和性能,请求间隔必然不能太小,因此会有延迟。
代码示例
前端发起websorket请求,代码实现:
代码语言:javascript复制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推送:
代码语言:javascript复制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