项目场景:
提示:项目相关背景:
什么是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协议
//判断浏览器是否支持WebSocket
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}
2 init方法
init () {
//如果你是http协议,使用ws,如果是https协议,使用wss协议,我这里是wss
this.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()
}