效果图:
## 服务器端:
const userIdMap = new Map();
在登录事件,添加用户名和id进map
userIdMap.set(data.username, socket.id);
//id赋值给chatid
socket.on('sendusername', data => {
const username = data.username;
for (const [name,id] of userIdMap) {
if (name==username){
console.log(id,name);
chatid=id;
}
}
socket.emit('getID', {chatid: chatid });
});
socket.on('message', data => {
const chatid = data.chatid;
//这里是关键
socket.to(chatid).emit('Chatmessage', data);
});
##客户端:
socket.on('getID',data =>{
const chatid=data.chatid;
$('.btn-send ').on('click',()=>{
//获取到聊天内容
var content=$('#content').html()
$('#content').html('')
if (!content) return alert('请输入内容或只能点击别人名字')
//发送给服务器,发送者消息
socket.emit('message',{
msg:content,
username:username,
avatar:avatar,
chatid:chatid
})
//自己窗口添加自己发出的消息
$('.box-bd').append(`
<div class="message-box">
<div class="my message">
<img class="avatar" src="${avatar}" alt="" />
<div class="content">
<div class="bubble">
<div class="bubble_cont">${content}</div>
</div>
</div>
</div>
</div>
`);
})
});
结论:用map存起来用户名和ID,然后根据用户名取出ID,在将id赋值给另一个变量,最后socket.to(chatid).emit(‘Chatmessage’, data)。丢你老母,收工!