Jingteng FE , de Jingteng Network. Es un equipo de desarrollo centrado en el front-end web y ha acumulado muchos años de experiencia en la resolución de problemas difíciles en el campo del front-end web. Abogando por una alta eficiencia, alta calidad, crecimiento, libertad y felicidad.
1. WebSocket
WebSocket es una tecnología de red proporcionada por HTML5 para la comunicación full-duplex entre navegadores y servidores , y pertenece al protocolo de capa de aplicación. Se basa en el protocolo de transporte TCP y multiplexa el canal de protocolo de enlace HTTP. El navegador y el servidor solo necesitan completar un apretón de manos, y se puede crear una conexión persistente directamente entre los dos, y se puede realizar una transmisión de datos bidireccional.
La aparición de WebSocket resuelve los inconvenientes de la comunicación semidúplex. Su característica más importante es que el servidor puede enviar mensajes activamente al cliente, y el cliente también puede enviar mensajes activamente al servidor.
Principio de WebSocket : el cliente notifica al servidor WebSocket de un evento con todas las ID de destinatarios (ID de destinatarios), y el servidor notifica a todos los clientes activos inmediatamente después de recibir, solo la ID está en la secuencia de ID de destinatario El cliente en el servidor manejará este evento .
Las características de WebSocket son las siguientes:
- Admite comunicación bidireccional, más en tiempo real
- Puede enviar texto o datos binarios''
- Basado en el protocolo TCP, la implementación del servidor es relativamente fácil
- El formato de datos es relativamente liviano, la sobrecarga de rendimiento es pequeña y la comunicación es eficiente
- Sin restricciones del mismo origen, los clientes pueden comunicarse con cualquier servidor
- El identificador del protocolo es ws (o wss si está encriptado) y la URL del servidor es la URL
- Tiene buena compatibilidad con el protocolo HTTP. Y la fase de apretón de manos adopta el protocolo HTTP, por lo que no es fácil de proteger durante el apretón de manos, y puede pasar a través de varios servidores proxy HTTP.
El uso de Websocket en Vue es el siguiente :
<template>
<div>
<button @click="send">发消息</button>
</div>
</template>
<script>
export default {
data () {
return {
path:"ws://localhost:8080/test/websocket",
socket:""
}
},
mounted () {
// 初始化
this.init()
},
methods: {
init: function () {
if(typeof(WebSocket) === "undefined"){
alert("您的浏览器不支持socket")
}else{
// 实例化socket
this.socket = new WebSocket(this.path)
// 监听socket连接
this.socket.onopen = this.open
// 监听socket错误信息
this.socket.onerror = this.error
// 监听socket消息
this.socket.onmessage = this.getMessage
}
},
open: function () {
console.log("socket连接成功")
},
error: function () {
console.log("连接错误")
},
getMessage: function (msg) {
console.log(msg.data)
},
send: function () {
this.socket.send(params)
},
close: function () {
console.log("socket已经关闭")
}
},
destroyed () {
// 销毁监听
this.socket.onclose = this.close
}
}
</script>
<style>
</style>
2. Implementación de mensajería instantánea: ¿diferencia entre sondeo corto, sondeo largo, SSE y WebSocket?
El propósito del sondeo corto y el sondeo largo es realizar una comunicación instantánea entre el cliente y el servidor.
La idea básica del sondeo corto: el navegador envía solicitudes http al navegador a intervalos regulares, y el servidor responde directamente después de recibir la solicitud, independientemente de si hay una actualización de datos. La comunicación instantánea implementada de esta manera es esencialmente un proceso en el que el navegador envía una solicitud y el servidor acepta la solicitud. Al permitir que el cliente realice solicitudes continuas, el cliente puede simular y recibir cambios en los datos del lado del servidor en tiempo real. . La ventaja de este método es que es relativamente simple y fácil de entender. La desventaja es que este método desperdicia seriamente los recursos del lado del servidor y del lado del cliente debido a la necesidad de establecer continuamente la conexión http. Cuando aumenta el número de usuarios, aumentará la presión en el lado del servidor, lo cual es muy irrazonable.
La idea básica del sondeo largo: primero, el cliente inicia una solicitud al servidor. Cuando el servidor recibe la solicitud del cliente, el servidor no responde directamente, sino que primero suspende la solicitud y luego juzga los datos en el servidor Hay una actualización. Si hay una actualización, responderá, si no hay datos, volverá después de un cierto límite de tiempo. Después de procesar la información devuelta por el servidor, la función de procesamiento de respuesta de JavaScript del lado del cliente enviará la solicitud nuevamente y restablecerá la conexión. En comparación con el sondeo corto, el sondeo largo tiene la ventaja de reducir significativamente el número de solicitudes http innecesarias, lo que ahorra recursos en comparación. La desventaja del sondeo prolongado es que la conexión se bloquea y también puede provocar el desperdicio de recursos.
La idea básica de SSE: el servidor utiliza información de transmisión para enviar información al servidor. Estrictamente hablando, el protocolo http no puede permitir que el servidor envíe información de forma activa. Sin embargo, existe una solución en la que el servidor declara al cliente que lo siguiente que debe enviar es la información de la transmisión. Es decir, lo que se envía no es un paquete único, sino un flujo de datos que se enviará de forma continua. En este momento, el cliente no cerrará la conexión y siempre esperará un nuevo flujo de datos enviado por el servidor.La reproducción de video es un ejemplo. SSE utiliza este mecanismo para enviar información al navegador mediante la transmisión de información. Se basa en el protocolo http y actualmente es compatible con otros navegadores excepto IE/Edge. Comparado con los dos métodos anteriores, no necesita crear demasiadas solicitudes http, lo que ahorra recursos.
WebSocket es un nuevo protocolo definido por HTML 5. A diferencia del protocolo http tradicional, este protocolo permite que el servidor envíe información al cliente de forma activa. La desventaja de usar el protocolo WebSocket es que la configuración del lado del servidor es más complicada. WebSocket es un protocolo full-duplex, es decir, ambos lados de la comunicación son iguales y pueden enviarse mensajes entre sí, mientras que el método SSE es una comunicación unidireccional y solo el servidor puede enviar información al cliente. necesita enviar información, pertenece a la siguiente solicitud http.
Los cuatro protocolos de comunicación anteriores, los tres primeros se basan en el protocolo HTTP.
Para estos cuatro protocolos de comunicación, desde el punto de vista del rendimiento: WebSocket > conexión larga (SEE) > sondeo largo > sondeo corto Sin embargo, si tenemos en cuenta la compatibilidad de los navegadores, el orden es exactamente el contrario: sondeo corto Sondeo > Sondeo largo > Conexión larga (SEE) > WebSocket Por lo tanto, todavía es necesario juzgar qué método usar de acuerdo con el escenario de uso específico.