websocket聊天的功能

第一步 安装相关依赖：

node需要安装： npm i socket.io

第二步 前端cdn引入socket

第三步 编写服务端的代码 

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}]

}

后端代码：

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 })
    })
})

前端的代码

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） // 将数据 追加到消息列表中
 
    })
 
 
})