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方法向服务端发送数据。