Escenario del proyecto:
提示:项目相关背景:
¿Qué es websocket? :
WebSocket
Es un protocolo de comunicación informática que proporciona un canal de comunicación full-duplex a través de una única conexión TCP. Permite la comunicación en tiempo real entre clientes y servidores web, lo que permite el intercambio de datos bidireccional con menor latencia y sobrecarga que las conexiones HTTP tradicionales.
WebSocket
La tecnología se utiliza a menudo en aplicaciones web que requieren transmisión de datos en tiempo real, como aplicaciones de chat, juegos en línea y plataformas de comercio financiero. Al utilizarWebSocket
HTTP, las aplicaciones web pueden establecer y mantener conexiones persistentes entre navegadores y servidores, lo que permite actualizaciones instantáneas del contenido web sin solicitudes HTTP constantes.
Escenario del proyecto:
La información publicada por el usuario en el terminal móvil debe aparecer en una ventana emergente en tiempo real en el terminal de PC en tiempo real, y aquí se requiere el protocolo websocket.
cómo utilizar
如果你是http协议,使用ws,如果是https协议,使用wss协议,我这里是wss
directamente en methods
la definición de un método init
1 Primero llame al método en el gancho creado o montado
this.init()
首先判断浏览器是否支持WebSocket协议
//判断浏览器是否支持WebSocket
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}
2 método de inicio
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 Cierre WebSocket antes de destruir
destroyed () {
// 销毁监听
this.ws.close()
}