项目场景：

提示：项目相关背景：

什么是webscoket？:

WebSocket是一种计算机通信协议，通过单个TCP连接提供全双工通信信道。实现了web客户端和服务器之间的实时通信，与传统的HTTP连接相比，允许以更低的延迟和开销进行双向数据交换。
WebSocket技术通常用于需要实时数据传输的网络应用程序，如聊天应用程序、在线游戏和金融交易平台。使用WebSocket，web应用程序可以在浏览器和服务器之间建立和维护持久的连接，从而实现对web内容的即时更新，而无需不断的HTTP请求。

项目场景：

用户在移动端发布的信息，需要实时在PC端进行实时弹窗提示，这里需要用到webscoket协议。

---

如何使用

如果你是http协议，使用ws，如果是https协议，使用wss协议，我这里是wss

直接在methods定义一个init方法

1 首先在created或mounted钩子调用方法

    this.init()

首先判断浏览器是否支持WebSocket协议

  //判断浏览器是否支持WebSocketif(typeof(WebSocket) === "undefined"){alert("您的浏览器不支持socket")}

2 init方法

    init () {//如果你是http协议，使用ws，如果是https协议，使用wss协议，我这里是wssthis.ws = new WebSocket('wss://127.0.0.1/server/web-socket')// 监听是否连接成功this.ws.onopen = () => {console.log('ws连接状态成功：' + this.ws.readyState)// 连接成功则发送一个数据// this.ws.send('连接成功')}// 接听服务器发回的信息并处理展示this.ws.onmessage = (data) => {console.log('接收到来自服务器的消息：')const wsData = JSON.parse(data.data)const message = {title: '货主发布',desc: `起始地：${wsData.fromWhere}<br/>目的地：${wsData.toWhere}<br/>货物类型：${wsData.goodsType}`,duration: 3}this.$Notice.info(message)}// 监听连接关闭事件this.ws.onclose = () => {// 监听整个过程中websocket的状态console.log('ws连接状态关闭：' + this.ws.readyState)}// 监听并处理error事件this.ws.onerror = function (error) {console.log(error)}},

3 销毁前关闭WebSocket

 destroyed () {// 销毁监听this.ws.close()}

---