前端部分

1. 搭建react框架

npx create-react-app demo名

2. 下载依赖

npm i socket.io-client

3. 新建一个文件，用来处理webRTC的发送与监听（/src/utils/wssConnection/wssConnection.js）

4. 在步骤3新建的wssConnection.js中引入socket.io-client，并进行简单的初始化

    import socketClient from "socket.io-client"
    //这是我的后端地址
    const SERVER="http://localhost:3030"
    let socket
    export const connectWithSocket = ()=>{
        socket = socketClient(SERVER)
        socket.on("connection", ()=>{
            console.log("id--", socket.id);
        })
    }

5. 在app.js文件中，引入connectWithSocket，并且在useEffect Hook中使用。

    import {connectWithSocket} from "./utils/wssConnection/wssConnection"
    function App() {
      const token = useRef(false)
      useEffect(()=>{
        if(!token.current){
          connectWithSocket()
        }
        token.current = true
      }, [])
      return ...
    }

后端部分

1. 下载依赖

npm i --save express socket.io uuid cors peer

2. 创建入口文件server.js

我在项目中把入口文件改为了server.js。

修改的方法是把package.json文件中的main字段的值改为server.js

{
    "main": "server.js",
    ...
}

3. 初始化io实例

const express = require("express")
const cors = require("cors")
const socket = require("socket.io")

const {ExpressPeerServer} = require("peer")

const app = express()
const PORT = process.env.PORT || 3030
app.use(cors())

// 监听端口号启动服务器
const server = app.listen(PORT, ()=>{
    console.log("listen", PORT);
})

// 使用ExpressPeerServer对象来创建peer服务器
const peerServer = ExpressPeerServer(server, {debug:true})
// 使用app.use设置中间件
app.use("/peerjs", peerServer)
// 传递server对象，初始化io实例
const io = socket(server, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
})
// 初始化对等连接用户数组
let peers = []
// 监听客户端socket连接
io.on("connection", socket=>{
    socket.emit("connection", null)
      // 断开连接时移除存储在服务器的用户并向其他客户端进行广播
    socket.on("disconnect", ()=>{
        console.log("有用户下线了",socket.id);
        peers = peers.filter(peer=> peer.socketId!==socket.id)
        // 向所有连接到客户端用户广播，并发送活跃用户列表
        io.sockets.emit("broadcast", {
            event: "ACTIVE_USERS",
            activeUsers: peers
        })
    })
    })