websocket聊天的功能

h9608222024-04-22 11:21

第一步安装相关依赖：

node需要安装： npm i socket.io

第二步前端cdn引入socket

第三步编写服务端的代码

javascript 复制代码

import http from 'node:http''

import {Server} from 'socket.io'

const server = http.createServer()

const io = new Server(server,{

cors:true  // 允许跨域

})

//事件模型驱动
io.on('connection',socket=>{console.log('连接成功')})


server.listen(3000,()=>{console.log('server is running at 3000')})

第四步前端链接成功的代码

第五步前端发送消息

第六步后端接收

开始做聊天的案例：

后端思路的分析：需要定义一个数据格式：里面有几个房间每个房间有几个人

const groupMap = {}

数据格式：{

1: ${name,room, id},{name,room,id}$

2: ${name,room, id},{name,room,id}$

}

后端代码：

javascript 复制代码

const groupMap = {}

io.on('connection',socket=>{

    // 创建房间号的逻辑

    socket.on('join',({name,room})=>{

        if(groupMap[room]){

            groupMap[room].push({name,room,id:socket.id})//已有就push

        }else{

            groupMap[room]=[{name,room,id:socket.id}]//没有就默认创建
        }
        
        socket.emit('groupMap',groupMap)//浏览器为维度   
                 
        socket.broadcast.emit('groupMap',grolpMap)//所有人都能看到

        //管理员发个消息
          
        socket.broadcast.to(room).emit('message',name:"管理员"

         message:`欢迎${name}进入聊天室`,
    })

    // 发消息的逻辑

     socket.on('message',({ name,message,room })=>{

         socket.broadcast,to(room).emit("message',{ name, message })

    })

})

前端的代码

javascript 复制代码

socket.on('connect',()=>{

    // 1 加入房间
    
    socket.emit('join',{name,room})  // name是名称 room是房间号

    // 2 gropMap 房间的信息, 将所有的房间渲染出来， 结构就是gropMap的结构

    socket.on('groupMap',(data)=>{

         // 渲染到前面左侧房间列表

        const roomList = document.queryselect('.roomList')    

        Object.keys(data).forEach(key=>{

            const item = document.createElement('div')

            item.className ='groupList-items'

            item.innerHTML=房间号:${key}房间人数:${data[key].length}

            roomList.appendChild(item)
        
        })
    
    })

    // 3 监听发送消息的事件

    document.addEventListener('keydown',(e)=>{

        if(e.key === 'Enter' ){


        const message = ipt.innerText

        socket.emit('message', {name,message,room})

        addCount(message) // 这个方法是把自己发送的消息追加到消息的列表中

        ipt.innerText = ''
    })


    // 4 监听接送的消息

    socket.on('message',(data)=>{

         addCount（data） // 将数据 追加到消息列表中

    })


})