美文网首页
websocket实现

websocket实现

作者: 爱翔是我二媳妇 | 来源:发表于2022-08-23 14:24 被阅读0次

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

相关文章

网友评论

      本文标题:websocket实现

      本文链接:https://www.haomeiwen.com/subject/zccwertx.html