socket-io para la comunicación en tiempo real de WebSocket
Prólogo del autor
Estimados lectores, me gustaría expresar mis más profundas disculpas a todos por no poder actualizar las publicaciones del blog recientemente debido a algunas razones. Ahora que esas cosas problemáticas se han resuelto, las actualizaciones diarias deberían ser posibles. Gracias por su apoyo, gracias !
Acerca de WebSockets
Websocket Es un protocolo basado en el modo de conexión larga que puede realizar el servicio de mensajería instantánea entre el navegador y el servidor. Una vez que se establece la conexión websocket entre el cliente y el servidor, los dos pueden comunicarse en cualquier momento y en cualquier lugar.
Conexión larga y conexión corta en comunicación de red
conexión corta
Conexión corta : El cliente envía una solicitud para establecer un enlace con el servidor. Una vez que se establece la conexión, el cliente envía un mensaje al servidor, el servidor lo recibe y procesa, y devuelve una respuesta de que la conexión está desconectada .
Los enlaces cortos pueden optimizar la utilización de recursos en el lado del servidor
比如HTTP协议是一款基于短链接模式的协议，意味着连接建立完毕之后，客户端向服务端发送请求之后服务器响应或超时之后就会断开，如果希望再次链接就只能再去发送请求
Conexión larga
Conexión larga : el cliente envía una solicitud para establecer un enlace con el servidor. Una vez que se establece la conexión, el cliente envía un mensaje al servidor, y el servidor lo recibe y procesa. Después de que se devuelva la respuesta, el enlace no será desconectado Ambos extremos también pueden usar este enlace para el seguimiento de la interacción de datos
La conexión larga puede realizar una comunicación instantánea entre el cliente y el servidor
marco socket.io
Instalar
extremo posterior
npm install socket.io
importación frontal
En circunstancias normales, el servidor creado por Socket.io alojará de forma estática el archivo js del front-end /socket.io/socket.io.js, por lo generalmente debe importarse y registrarse.
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
</script>
Introducción a Socket.io
Socket.io es una biblioteca de operaciones de red que encapsula las operaciones de webSocket. Proporciona algunos métodos API simples para que el navegador pueda establecer fácilmente un enlace websocket con el segmento del servidor y comunicarse a través de este enlace
Documento oficial: Portal
Documento chino: Portal
proyecto de fondo
1. Cree un nuevo archivo js en el directorio donde está instalado el módulo y asígnele el nombre que desee.
2. Generalmente usamos socket-io con el servidor http, por lo que hablaremos sobre la escritura y construcción de este código a continuación. El módulo es como sigue
npm init -y
// 初始化项目包
npm i express
// 安装express
npm i cors
// 安装cors模块解决跨域
npm i socket.io
// 安装Socket.io
3. Escribe el siguiente código
const express = require('express');
// 导入express模块
const app = express();
const http = require('http');
// 导入http模块
const server = http.createServer(app);
// 注册http服务器
const {
Server } = require("socket.io");
const io = new Server(server, {
cors:{
origin: '*'
}
});
// 解决跨域
io.on('connection', (socket) => {
console.log('有客户端连进来了:'+socket.id);
socket.on('textmsg', function(data){
// 接收到某客户端发的消息后，给所有人群发一遍即可
io.emit('textmsg', data)
})
});
// io.on() 用于监听websocket事件 connection为连接建立成功事件
// 一旦客户端向服务端发送请求建立连接，连接建立成功后将触发该事件，
// 将立即执行第二个参数：回调方法
server.listen(3000, () => {
console.log('websocket服务已启动，正在监听 *:3000');
});
// 监听端口
luego iniciar el servicio
node app.js
// 这个app.js是我创建的js文件命名
Como se muestra en la siguiente figura
Construcción de la página de front-end
Cree una página html de front-end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Socket.io</title>
</head>
<body>
<script src="./scripts/socket.io.js">
</script>
<script></script>
</body>
</html>
Si se produce este error, es un error entre dominios
