NodeJS中使用Socket.IO

PM学代码

已于 2023-03-28 22:33:26 修改

阅读量2.2k

点赞数

文章标签：前端

于 2023-03-28 22:24:32 首次发布

本文链接：https://blog.csdn.net/weixin_51072684/article/details/129826687

版权

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文件夹作为根目录，并运行如下命令，初始化包管理配置文件：

npm init -y

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

npm i express

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

npm i socket.io

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

// 导入express模块
const express = require('express')
// 引入http创建服务器实例的方法
const {createServer} = require('http')
const {Server} = require('socket.io')
// 创建express的服务器实例
const app = express()
// 创建http服务器实例
const httpServer = createServer(app)
// 创建socket.io的实例
const io = new Server(httpServer,{
  // 处理cors,解决跨域问题
  cors:{
    origin: "http://127.0.0.1:5500",//需要跨域资源共享的地址
    allowedHeaders: ["my-custom-header"],
    credentials: true
  }
})
// 监听客户端连接，回调函数会传递本次连接的socket
io.on('connection',(socket) => {
  console.log(socket.id)
  // 监听到客户端发送的消息
  socket.on('sendToServer',(message) => {
    console.log(message)
    // 向客户端发送消息
    socket.emit('sendToClient',{
      message:'你好我是服务端，让我们来聊天呀'
    })
  })
} )

// 调用listen方法，指定端口号并启动web服务器
httpServer.listen(3000,() =>{
  console.log('server is running at http://127.0.0.1:3000')
})

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

<!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>Document</title>
</head>
<body>
  <script type="module">
    import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
    const socket = io("http://127.0.0.1:3000")
    // 与服务器连接成功
    socket.on('connect',() => {
      console.log('socket链接成功！'+socket.id)
    })
    // 向服务器发送消息
    socket.emit('sendToServer',{
      message:'我是客户端,来陪我聊聊'
    })
    // 接收服务器发送的消息
    socket.on('sendToClient',(message) => {
      console.log(message)
    })
  </script>
</body>
</html>

也可以安装websocket客户端相关的包