NodeJS中利用Socket.IO

1.什么是 Socket.IO

Socket.IO 是一个库，可以在客户端和服务器之间实现 低延伸, 双向 和 基于变乱的 通讯。

它创建在 WebSocket 协议之上，并提供额外的包管，比方回退到 HTTP 长轮询或主动重新毗连。
2.特点

HTTP 长轮询回退
假如无法创建 WebSocket 毗连，毗连将回退到 HTTP 长轮询。
这个特性是人们在十多年前创建项目时利用 Socket.IO 的缘故起因（！），由于欣赏器对 WebSockets 的支持仍处于起步阶段。
纵然如今大多数欣赏器都支持 WebSockets（凌驾97%），它仍然是一个很棒的功能，由于我们仍然会收到来自用户的陈诉，这些用户无法创建 WebSocket 毗连，由于他们利用了一些错误设置的署理。
主动重新毗连
在某些特定环境下，服务器和客户端之间的 WebSocket 毗连大概会制止，而两边都不知道链接的断开状态。
这就是为什么 Socket.IO 包罗一个心跳机制，它会定期查抄毗连的状态。
当客户端终极断开毗连时，它会以指数回退延伸主动重新毗连，以免使服务器不堪重负。
数据包缓冲
当客户端断开毗连时，数据包会主动缓冲，并在重新毗连时发送。
3.运作原理

Socket.IO 服务器 (Node.js) 和 Socket.IO 客户端（欣赏器, Node.js 或 其他编程语言）之间的双向通道尽大概利用WebSocket 毗连创建，并将利用 HTTP 长轮询作为后备。
Socket.IO 代码库分为两个差异的层：

• 底层通道：我们称之为Engine.IO，Socket.IO内部的引擎
  
• 高级 API：Socket.IO 本身
  

4.服务端

1.新建demo文件夹作为根目次，并运行如下下令，初始化包管理设置文件：

1. npm init -y

复制代码

 2.运行如下下令，安装express

1. npm i express

复制代码

3.运行如下下令，安装Socket.IO

1. npm i socket.io

复制代码

4.在根目次中新建app.js，并初始化如下的代码

1. // 导入express模块
2. const express = require('express')
3. // 引入http创建服务器实例的方法
4. const {createServer} = require('http')
5. const {Server} = require('socket.io')
6. // 创建express的服务器实例
7. const app = express()
8. // 创建http服务器实例
9. const httpServer = createServer(app)
10. // 创建socket.io的实例
11. const io = new Server(httpServer,{
12.   // 处理cors,解决跨域问题
13.   cors:{
14.     origin: "http://127.0.0.1:5500",//需要跨域资源共享的地址
15.     allowedHeaders: ["my-custom-header"],
16.     credentials: true
17.   }
18. })
19. // 监听客户端连接，回调函数会传递本次连接的socket
20. io.on('connection',(socket) => {
21.   console.log(socket.id)
22.   // 监听到客户端发送的消息
23.   socket.on('sendToServer',(message) => {
24.     console.log(message)
25.     // 向客户端发送消息
26.     socket.emit('sendToClient',{
27.       message:'你好我是服务端，让我们来聊天呀'
28.     })
29.   })
30. } )
32. // 调用listen方法，指定端口号并启动web服务器
33. httpServer.listen(3000,() =>{
34.   console.log('server is running at http://127.0.0.1:3000')
35. })

复制代码

通讯范例

单向通讯：只有发送变乱的客户端可以收到消息。

1. io.on('connection', function (socket) {
2.   socket.on('private message', function (msg) {
3.     socket.emit('serverData', data);
4.   });
5. });

复制代码

公共通讯：全部客户端（包罗发送变乱的客户端）都可以收到消息。

1. io.on('connection', function (socket) {
2.   socket.on('private message', function (msg) {
3.     io.sockets.emit('serverData', data);
4.   });
5. });

复制代码

广播通讯：除了发送变乱的客户端外，全部其他客户端都可以收到消息。

1. io.on('connection', function (socket) {
2.   socket.on('private message', function (msg) {
3.     socket.broadcast.emit('serverData', data);
4.   });
5. });

复制代码

指定通讯：可以确保只有指定的客户端汲取到消息，而其他客户端则不会收到这些信息。

1. io.on('connection', function (socket) {
2.   socket.on('private message', function (msg) {
3.     io.to(socket.id).emit('private message', msg);
4.   });
5. });

复制代码

5.在根目次中新建index.html，并初始化如下的代码

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.   <meta charset="UTF-8">
5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
7.   <title>Document</title>
8. </head>
9. <body>
10.   <script type="module">
11.     import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
12.     const socket = io("http://127.0.0.1:3000")
13.     // 与服务器连接成功
14.     socket.on('connect',() => {
15.       console.log('socket链接成功！'+socket.id)
16.     })
17.     // 向服务器发送消息
18.     socket.emit('sendToServer',{
19.       message:'我是客户端,来陪我聊聊'
20.     })
21.     // 接收服务器发送的消息
22.     socket.on('sendToClient',(message) => {
23.       console.log(message)
24.     })
25.   </script>
26. </body>
27. </html>

复制代码

也可以安装websocket客户端干系的包

1. npm i [email protected] -S

复制代码

// 按需导入 io 方法：调用 io('url') 方法，即可创建 websocket 毗连的实例

1. import { io } from 'socket.io-client'

复制代码