Prólogo
Si desea realizar chat, transmisión en vivo, videoconferencia y otras funciones en la página web, debe ser inseparable de Websocket. Y mientras haya una redacción en tiempo real, lo primero que pensamos es Websocket. Para el protocolo HTTP habitual, solo el cliente puede iniciar la solicitud y el servidor no puede enviar mensajes al cliente. No puede ser instantáneo, y Websocket solo necesita un apretón de manos, y el cliente y el servidor pueden lograr una conexión larga para enviar comentarios en tiempo real.
1. ¿Qué es websocket?
Para comprender mejor websocket, primero comprenda brevemente el protocolo de red
TCP / IP (Protocolo de control de transmisión / Protocolo de Internet) como el protocolo central de Internet. Es una familia de protocolos, que incluye múltiples protocolos.
Ejemplos de protocolos de red comunes:
Capa de red: protocolo IP Capa de transporte: TCP (Protocolo de control de transmisión) Capa de aplicación: Protocolo HTTP (Protocolo de transferencia de hipertexto)
WebSocket es un protocolo para la comunicación full-duplex en una sola conexión TCP. El protocolo WebSocket nació en 2008 y se convirtió en un estándar internacional en 2011. Todos los navegadores ya son compatibles. WebSocket facilita el intercambio de datos entre el cliente y el servidor, lo que permite que el servidor envíe datos activamente al cliente. En la API de WebSocket, el navegador y el servidor solo necesitan completar un protocolo de enlace, y los dos pueden crear directamente una conexión persistente y realizar una transmisión de datos bidireccional.
La comunicación http tradicional solo puede ser iniciada por el cliente, y el servidor no puede enviar mensajes activamente. Si el servidor tiene cambios continuos de estado, solo puede usar sondeo, y el sondeo es muy ineficiente y desperdicia recursos, por lo que hay un websocket.
Su principal característica es que el servidor puede enviar información al cliente de manera activa, y el cliente también puede enviar información activamente al servidor. Es un verdadero diálogo bidireccional igual y pertenece a un tipo de tecnología de inserción de servidor . Otras características incluyen:
- Basado en el protocolo TCP, la implementación del lado del servidor es relativamente fácil.
- Tiene buena compatibilidad con el protocolo HTTP. Los puertos predeterminados también son 80 y 443, y el protocolo HTTP se usa en la fase de protocolo de enlace, por lo que no es fácil de proteger cuando se da la mano y puede pasar varios servidores proxy HTTP.
- El formato de datos es relativamente ligero, la sobrecarga de rendimiento es pequeña y la comunicación es eficiente.
- Puede enviar texto o datos binarios.
- Sin la restricción del mismo origen, el cliente puede comunicarse con cualquier servidor.
- El identificador de protocolo es ws (ws si está cifrado, wss), y la URL del servidor es la URL.
Segundo, el uso de websocket
Uso simple de WebSocket
var ws = nuevo WebSocket ("ws: // localhost: 3000" );
ws.onopen = function (evt) {// onopen callback function después de una conexión exitosa
console.log ("Connection open ..."); // conexión de socket
ws.send ("Hello WebSockets!"); // El método send () se utiliza para enviar datos al servidor };
ws.onmessage = function (evt) {// Especifique la función de devolución de llamada
console.log después de recibir datos del servidor ("Mensaje recibido:" + evt.data); // Recibir información
del servidor ws.close (); // Desconectarse activamente del servidor };
ws.onclose = function (evt) {// onclose Después de cerrar la conexión Función de devolución de llamada
console.log ("Conexión cerrada"); // conexión de socket desconectada }; ws.onerror = function (evt) {// onclose función de devolución de llamada para error de conexión console.log ("Conexión errónea"); // El socket está desconectado debido a una conexión incorrecta, por ejemplo, parte de la información no se puede enviar }; // Si desea especificar múltiples funciones de devolución de llamada, puede usar addEventListener
ws.addEventListener ('abierto', función (evento) {ws.send ('¡Hola servidor!' );});
readyStateLa propiedad devuelve el estado actual del objeto de instancia, un total de cuatro
- CONECTANDO: El valor es 0, lo que indica que se está conectando.
- ABIERTO: el valor es 1, lo que indica que la conexión es exitosa y la comunicación es posible.
- CIERRE: El valor es 2, lo que indica que la conexión se está cerrando.
- CERRADO: el valor es 3, lo que indica que la conexión se ha cerrado o no se pudo abrir la conexión.
switch (ws.readyState) {
case WebSocket.CONNECTING:
// hace que algo se
rompa ;
case WebSocket.OPEN: // hacer algo break ; case WebSocket.CLOSING: // hacer algo break ; case WebSocket.CLOSED: // hacer algo break ; predeterminado : // esto nunca sucede break ; }
En tercer lugar, vue + websocket + node + mongodb crea una versión simple de la sala en vivo y la sala de chat
Idea de implementación: la sala de chat presa + chat en vivo ha completado la función de sala de chat
La implementación específica es que el cliente usa la interfaz de página de front-end vue para escribir con node + express
Dado que se trata de una sala de transmisión en vivo, se supone que todas las personas que entran son turistas, pero antes de que entre, debe asignarse un apodo. El apodo se almacenará en la tabla de usuarios. Los mensajes enviados y recibidos enviados por el usuario se colocarán en la tabla de mensajes y se distribuirán a todos los clientes a través de la transmisión
En la actualidad, hay dos interfaces: una para guardar el nombre de usuario. La interfaz verificará si existe el mismo apodo en la base de datos. La otra es consultar la tabla de mensajes para obtener mensajes históricos. Los mensajes recibidos por el websocket se almacenarán en la tabla de mensajes.
Finalización del seguimiento de la función de bombardeo ...
Dirección del código: https://github.com/leitingting08/IM
Referencia: