Node.js+Socket.IO实现实时双向通信之加入房间

小半 • 2024年3月2日下午6:03 • 前端开发 • 阅读 219

实现加入房间功能

上一章，我们简单的讲了Socket.IO服务端和客户端之间的双向通信，下面我们来举个简单的例子，具体了解一下。

服务端

// 导入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('连接成功！')
    const socketId = socket.id
    let clientId = ''
    let roomId = ''
    let counter = 0
    //接收来自客户端的消息
    socket.on('join_to_room',(data) => {
        roomId = data.roomId
        clientId = data.clientId
        socket.join(roomId)
        console.log(`加入房间 socketId： ${socketId},clientId:${clientId},roomId:${roomId}`)
    })

    //发送消息给客户
    setInterval(()=>{
        socket.to(roomId).emit('server_to_client',{
            message:{
                socketId,
                clientId,
                roomId,
                counter:counter++
            }
        })
    },10000)
} )


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

客户端

执行时，clientId和roomId可以用参数指定，定义页面路由为：path: '/room/:clientId/:roomId',

<script setup>
import { io } from 'socket.io-client'
import { useRoute } from 'vue-router'
const socket = io(`http://localhost:3001`)
const route = useRoute()
const clientId = route.params.clientId
const roomId = route.params.roomId
socket.on('connect', () => {
  console.log('socket链接成功！' + socket.id)
})
// 接收服务器发送的消息
socket.on('server_to_client', (data) => {
  console.log(JSON.stringify(data.message))
})
// 向服务器定时发送消息
socket.emit('join_to_room', { clientId, roomId })
</script>

<template>
  <div style="font-size: 20px; padding: 20px">
    <div>clienId:{{ clientId }}</div>
    <div>roomId:{{ roomId }}</div>
  </div>
</template>

<style scoped lang="scss"></style>