WebSocket与sse

区别:

1.WebSocket是全双工通道，可双向通信；sse是单向通道，只能服务器向浏览器发送

2.WebSocket是一个新协议，需服务端支持；SSE则是部署在HTTP协议之上，现有的服务器软件都支持

3.SSE是一个轻量级协议，相对简单；WebSocket是一种较重的协议，相对复杂

4.SSE默认支持断线重连，WebSocket则是需要额外部署

5.SSE支持自定义发送的数据类型

SSE

let sse = new EventSource ('http://localhost/sse');   //服务器不断向我们发送信息

see.onmessage=function(evt) {

  var el = document.getElementById('sse')

   el.innerHTML = evt.data

}

-- // 服务器死循环事件流向我们推送

--

let sse = new EventSource ('http://localhost/sse-retry');  //通过不断重试的机制来完成服务器主动推送

WebSocket

cinst uid='xxx'

// 表示我们是否是手动关闭的ws

let isHandle = false

let ws= new WebSocket(`ws://localhost:8081/ws/${uid}`)

let timer = null

const openHandle = () => {

  console.log('ws连接成功啦！！')

}

const closeHandle = () => {

  console.log('ws关闭成功啦！！')

if(!isHandle ) {      //不是手动时触发

  restart()     //连接关闭时 尝试重连

}

}

const messageHandle = () => {

  console.log('前端接受到消息啦！！')

}

const errorHandle = () => {

  console.log('ws出错啦！！')

}

ws.addEventListener('open', openHandle)

ws.addEventListener('close', closeHandle )

ws.addEventListener('message', messageHandle )

ws.addEventListener('error', errorHandle )

--

const sendMessage = () => {

console.log('我发送了消息')

  ws.send('i鱼鱼鱼')

}

const closeWs = () => {   // 手动关闭

  isHandle = true

   ws.close()

}

<Button @click='sendMessage'> 打开连接<Button>

<Button @click='closeWs '> 关闭连接<Button>

服务线断掉了 ，WebSocket关闭 启动之后，客户端无法自动连接服务端（客户端没自动连接），处理方法:重连

//重连  --- setInterval restart

const restart = () => {

 console.log('客户端与服务端连接失败，准备开始重连')

 timer = setInterval(() => {

 console.log('重连中.....')

 ws= new WebSocket(`ws://localhost:8081/ws/${uid}`)

 if(ws.readyState == 0) ｛  // 重连成功

  clearInterval(timer)

   timer = null

// 事件需重新绑定

ws.addEventListener('open', openHandle)

ws.addEventListener('close', closeHandle )

ws.addEventListener('message', messageHandle )

ws.addEventListener('error', errorHandle )

｝

},1000)

}

-- 另外

// 心跳机制

1. // setInterval 持续给websocket服务端发送ping包

持续给websocket发送一个包,如果服务端一直有在收到这个包，客户端和它连接是正常的

2.close里重连restart

 websocket卸载

onInmountes钩子里 或者 vueUse钩子

// vueUse

impirt { tryOnUnmounted } from '@/vueuse/core'

tryOnUnmounted (()  => {

  closeWs()

})