第一步 安装相关依赖：
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） // 将数据 追加到消息列表中
})
})
