Node.js+Socket.IO实现实时双向通信

关于WebSocket

WebSocket是一种用于实现双向通信的协议。它不需要在每次通信时建立新的连接，相比HTTP，其头部信息较轻量，因此可以以较低的成本实现双向通信。

定义了ws:和wss:作为URI方案。wss:方案使用TLS进行加密。

关于Socket.IO

Socket.IO是一个用于实现实时双向通信的JavaScript库，旨在简化客户端和服务器之间的实时数据传输。虽然它的名字中包含”Socket”，但它实际上是基于WebSocket等多种传输协议的封装和抽象，以实现跨浏览器和跨平台的实时通信。

Socket.IO的主要特点包括：

实时性： Socket.IO允许服务器和客户端之间实时地传输数据，这对于需要即时更新的应用程序非常有用，比如聊天应用、实时协作工具等。
跨平台支持： Socket.IO支持多种传输协议，包括WebSocket、轮询（polling）和长轮询（long polling），这使得它可以在不同的浏览器和设备上工作，确保最佳的兼容性。
自动回退： 如果WebSocket在某些环境中不可用，Socket.IO能够自动降级到其他传输方式，以确保通信的可靠性。
事件驱动： Socket.IO使用事件（events）来实现通信，服务器和客户端都可以触发和监听事件，从而实现双向的数据传输和操作。
简化API： Socket.IO的API设计使得在应用程序中设置和处理实时通信变得相对简单，无需深入了解底层通信协议的细节。

Socket.IO通常用于构建实时性强的网络应用，如在线游戏、实时监控、实时协作工具和聊天应用。它提供了一个抽象层，可以让开发人员更容易地处理复杂的实时通信逻辑。虽然它并不是WebSocket本身，但在WebSocket等技术基础上提供了更高级的功能和便利性。

实践

准备

我们来写一个简单的列子，了解Socket.IO，我们的服务端使用的是node.js，同时也需要用到客户端，所以我们要安装socket.io-client。

npm init
npm install socket.io socket.io-client

如果需要使用TypeScript的话，可以安装一下。

npm install --save-dev typescript
npx tsc --init

连接

服务端

// 导入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://localhost:3000",//需要跨域资源共享的地址
        allowedHeaders: ["custom-header"],
        credentials: true
    }
})
// 监听客户端连接，回调函数会传递本次连接的socket
io.on('connection',(socket) => {
    console.log('连接成功！')
} )

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

客户端 (在Vue3项目中调用)

import { io } from 'socket.io-client'
const socket = io(`http://localhost:3001`)
socket.on('connect', () => {
  console.log('socket链接成功！' + socket.id)
})

测试

服务端

客户端

服务端与客户端之间的通信

服务端

// 导入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://localhost:3000",//需要跨域资源共享的地址
        allowedHeaders: ["custom-header"],
        credentials: true
    }
})
// 监听客户端连接，回调函数会传递本次连接的socket
io.on('connection',(socket) => {
    console.log('连接成功！')
    let counter = 0;
    //接收来自客户端的消息
    socket.on('sendToServer',(message) => {
        console.log('来自客户端',message)
    })
    // 发送消息给客户端
    setInterval(()=>{
        socket.emit('sendToClient',{
            message:`你好，我是服务端呀 ${counter++}`
        })
    },10000)
} )


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

客户端

import { io } from 'socket.io-client'
const socket = io(`http://localhost:3001`)
socket.on('connect', () => {
  console.log('socket链接成功！' + socket.id)
})
// 接收服务器发送的消息
socket.on('sendToClient', (message) => {
  console.log(message)
})
// 向服务器定时发送消息
let counter = 0
setInterval(() => {
  socket.emit('sendToServer', {
    message: `客户端向服务器发消息呢！！${counter++}`
  })
}, 10000)