WebSocket实时通信详解与示例-优快云博客

本文链接：https://blog.youkuaiyun.com/ScumStudy/article/details/121907634

本文介绍了如何建立WebSocket连接，包括服务端和客户端的设置。详细讲解了客户端向服务端发送消息、服务端向客户端及所有客户端广播消息的过程，并提供了一个简单的交互 demo，展示了一问一答的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、建立websocket连接

服务端

1、新建服务端项目目录
2、安装模块：socket.io

# 先进入socketserver目录  执行命令
cd socketserver
npm init
# 一路回车即可  初始化完毕后将会新增package.json
npm install --save socket.io

3、新建index.js文件, 在该文件中引入socketio模块, 监听客户端连接

// index.js
// 创建http服务  用于监听端口   接收客户端连接请求
const http = require('http').createServer()
// 创建socketio实例   socketio依赖于http服务
// 需要借助http服务, 才可以接收客户端发来的建立websocket连接的请求
const socketio = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
})
// 基于socketio 监听客户端的websocket连接事件 connection
socketio.on('connection', (socket)=>{
  // websocket连接建立成功后, 将会自动调用该回调方法, 并且
  // 传入与客户端交互所需要使用的socket对象
  console.log('有客户端连进来了:'+socket.id)
})

// 启动http服务, 监听通过3000端口发来的请求
http.listen(3000, ()=>{
  console.log('server is Running...')
})

客户端

1、新建HTML页面
2、引入socket.io.js 建立连接

<script src="./socket.io.js"></script>
<script>
    // 向ip:port的位置发送建立websocket连接的请求
    // 连接建立成功后将会返回与服务端交互所需要的socket对象
    let socket = io('ws://127.0.0.1:3000/')
</script>

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

（1）客户端向服务端发送消息

客户端发送消息

let socket = io('ws://127.0.0.1:3000/')
// emit为发送消息：  （消息类型， 消息内容）
socket.emit('textmsg', 'hello!')

服务端接收消息

socketio.on('connection', (socket)=>{
    socket.on('textmsg', (data)=>{
        console.log(data)
    })
})

（2）服务端向客户端发消息

服务端发送消息

socketio.on('connection', (socket)=>{
    socket.emit('textmsg', '瞅你丑..')
})

客户端接收消息

let socket = io('ws://127.0.0.1:3000/')
// 监听服务端发过来的消息
socket.on('textmsg', (data)=>{
    console.log(data)
})

（3）服务端向所有的客户端广播消息

一旦服务端向所有客户端广播消息, 那么所有的客户端都将会同时接收到该服务端发回来的消息, 每个客户端各自处理

socketio.on('connection', (socket)=>{
    // 向所有客户端广播消息
    socketio.emit('textmsg', '大家好, 我是xxx')
})

小demo(一问一答)

index.js

const { Socket } = require('socket.io')

//引入express模块
const app=require('express')()
//引入HTTP模块
const server=require('http').Server(app)
//引入socket.io模块
const io=require('socket.io')(server)

//创建端口
server.listen(3000,()=>{
    console.log('serve is Running')
})

//引入index页面
app.get('/',(req,res)=>{
    res.sendFile(__dirname+'/index.html')
})

//连接事件
io.on('connection',(socket)=>{
    console.log('有人进来了：'+socket.id);
    //客户端发消息来，服务端on事件接收
    socket.on('news',(data)=>{
        console.log(data);
        //接收到请求后。向客户端发送消息
        if(/你在干嘛/.test(data)){
            socket.emit('news','我在学习')
            //广播：向所有客户端发消息
            io.emit('news','大家都在干嘛')
        }
    })

    //断开连接
    socket.on('disconnect',()=>{
        console.log('有人离开了');
    })
})

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>
    <button id="btn">点击按钮建立连接</button>
    <button id="btn2">客户端向服务器发消息：你在干嘛</button>
</body>

<script src="/socket.io/socket.io.js"></script>
<script>
    let socket
    //点击按钮建立socket连接
    btn.addEventListener('click',()=>{
        socket=io()
        console.log(socket)
        //服务端发来消息，客户端通过on事件监听接收
        socket.on('news',(data)=>{
            alert('服务端回答说：'+data)
        })
    })
    //点击按钮向服务端发送消息
    btn2.addEventListener('click',()=>{
        //如果没有建立连接，请先点击按钮建立连接
        if(!socket){
            alert('请先点击按钮建立连接，再发送消息')
            return
        }
        //向服务端发消息
        socket.emit('news','客户端问：你在干嘛')
    })
</script>
</html>