websocket是什么
websocket相比于Http而言是一个双向通信的协议，并且一直保持活动状态，直到客户端或者服务端断开。
主要用于监听、消息、通知等需要实时反馈消息的场景。
如：聊天场景、下载进度、发布系统日志反馈等。
当然也可以通过Http轮询来实现以上场景，不过websocket相较http更轻更快。
采用http轮询需要反复的链接、断开连接更加消耗浏览器资源。
image.png
- HTTP 是无状态的，也就是说，它将每个请求当成唯一和独立的。无状态协议具有一些优势，例如，服务器不需要保存有关会话的信息，从而不需要存储数据。但是，这也意味着在每次 HTTP 请求和响应中都会发送关于请求的冗余信息，比如使用 Cookie 进行用户状态的验证。
websocket特点
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是 80 和 443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）借助了http协议的一次握手建立连接。
前端实现
const pre = "wss:" // 或"ws:"
// 拼接url
const surl = `${pre}${url}`
// 校验浏览器是否支持websocket
if (typeof WebSocket === "undefined") {
return
}
const websocket = new WebSocket(surl)
// console.log(websocket.readyState) // 0
// readyState
// 0 链接还没有建立（正在建立链接）
// 1 链接建立成
// 2 链接正在关闭
// 3 链接已经关闭
// 如果链接成功建立，向服务器发送消息
if(websocket.readyState === 1){
sendMessage(data)
// 否则一秒后重新尝试（此步需要递归，这里只展示思路）
} else if (websocket.readyState === 0) {
setTimeOut(() => {
if(websocket.readyState === 1){
sendMessage(data)
}
}, 1000)
}
if(websocket.readyState === 3){
console.log("链接异常，请稍后重试")
// 进入错误处理
onError()
}
const sendWebsocket = ({
url,
params = {},
onMessage,
onError,
}) => {
// 监听链接开启
websocket.onopen = () => {
console.log("--open--")
}
// 监听消息
websocket.onmessage= (e) => {
console.log(e)
// do something
onMessage();
}
// 监听错误
websocket.onerror= (e) => {
console.log(e)
// do something
onError()
}
// 监听关闭状态
websocket.onerror= (e) => {
console.log(e)
// do something
}
}
// 向服务端发送数据
const sendMessage = (data) => {
websocket.send(JSON.stringify(data))
}
// 请求关闭连接
const closeWebsocket = () => {
websocket.close()
}
websocket在前端一共有四种监听回调： onopen、onmessage、onerror、onclose, 也就是开启、有服务端发来消息、有错误发生、关闭
websocket需要先建立连接，再手动调用.send方法向服务端发送数据。
网友评论