phpcms v9 网站搬家,鲜花销售网站建设策划表,网站建设教程简笔画,万互网站建站Socket.IO 是一个基于 Node.js 的实时应用库#xff0c;它封装了 WebSocket 协议#xff0c;同时提供了降级方案#xff0c;在不支持 WebSocket 的环境下能自动切换到其他传输方式#xff0c;如 HTTP 长轮询。
核心概念 WebSocket #xff1a;HTML5 提供的一种在单个 TCP… Socket.IO 是一个基于 Node.js 的实时应用库它封装了 WebSocket 协议同时提供了降级方案在不支持 WebSocket 的环境下能自动切换到其他传输方式如 HTTP 长轮询。
核心概念 WebSocket HTML5 提供的一种在单个 TCP 连接上进行全双工通信的机制实现客户端与服务器的实时通信。 实时通信 服务器和客户端能够在任意时刻相互发送数据。 降级机制 当 WebSocket 不可用时Socket.IO 会自动降级到 HTTP 长轮询等其他通信方式。 安装 服务器端Node.js
npm install socket.io 客户端
script src/socket.io/socket.io.js/script 当你使用 socket.io 模块创建一个实例比如 const io require(‘socket.io’)(server)时Socket.IO 默认会在你的 HTTP 服务上挂载一个中间件用来处理对 /socket.io/ 路径下的请求。
当浏览器访问 /socket.io/socket.io.js 时实际上是连接到了你 Node.js 后端运行的 socket.io 库内部的一个内置 HTTP 接口这个接口会动态返回客户端所需的 JavaScript 文件即 socket.io.js 或压缩后的 socket.io.min.js 基本使用 服务器端示例(与 Express 集成) const express require(express);
const app express();
const http require(http).Server(app);
const io require(socket.io)(http);// 中间件
app.use(express.json());
app.use(express.static(public));// API 路由
app.get(/api/users, (req, res) {res.json([{ id: 1, name: John }]);
});// Socket.IO 连接// 监听客户端连接事件
io.on(connection, (socket) {console.log(一个用户已连接);// 监听客户端发送的消息socket.on(chat message, (msg) {// 向所有连接的客户端广播消息io.emit(chat message, msg);});// 监听客户端断开连接事件socket.on(disconnect, () {console.log(一个用户已断开连接);});
});const port 3000;
http.listen(port, () {console.log(服务器运行在端口 ${port});
}); 客户端示例
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleSocket.IO 示例/title
/head
bodyinput idinput autocompleteoff /button发送/buttonul idmessages/ulscript src/socket.io/socket.io.js/scriptscriptconst socket io();const input document.getElementById(input);const button document.querySelector(button);const messages document.getElementById(messages);button.addEventListener(click, () {if (input.value) {// 向服务器发送消息socket.emit(chat message, input.value);input.value ;}});// 监听服务器发送的消息socket.on(chat message, (msg) {const item document.createElement(li);item.textContent msg;messages.appendChild(item);});/script
/body
/html
