基于socket.io的web聊天室

一、项目介绍

该项目使用node.js作为后端服务器框架，并利用socket.io来实现web聊天室功能。socket.io是由 JavaScript 实现的基于Node.js架构体系的用于实时通信的开源框架，它包括了客户端的 JavaScript 库和服务器端的 Node.js 服务。

该项目实现多人实时聊天室的功能，浏览器将用户数据和消息发送给服务器，服务器收到后则将用户信息和消息群发给所有浏览器用户。

二、项目功能与代码实现

1.用户登录功能

用户在前端页面填入昵称，并选择头像登录，客户机与服务器建立连接，将用户数据发送给服务器。服务器维护一个用户列表，并查询该昵称是否已存在，并将结果发送给浏览器处理。服务器更新用户列表，并将新登录用户和用户列表广播发送给已连接所有客户端。

客户端登录代码


login.addEventListener('click',function() {username = $("#username").val().trim()if(!username) {alert('用户名不能为空'）return}photo = $('#login_photo li.now img').attr('src')socket.emit('login',{
       username: username,
       photo: photo})
})

服务器验证用户登录数据

socket.on('login',data => {let user = users.find(item => item.username === data.username)
    if(user){socket.emit('loginError',{msg: '该昵称已使用'})}else{users.push(data)socket.emit('loginSuccess',data)
    }
    io.emit('userAdd',data)
    io.emit('userList',users)
})

2.聊天室用户列表更新功能

服务器在用户登录或退出后更新用户数据并广播发送给客户端，客户端则更新聊天室的用户列表并计算现有人数。

服务器广播用户列表

io.emit(‘userList’,users)

客户端更新用户列表

socket.on('userList',function(data) {user_list.html('')data.forEach( item => {user_list.append(`<li class="user">div class="photo"><img src="${item.photo}" /></div><div class="name">${item.username}</div></li> `)
})

3.消息发送功能

客户端将消息发送给服务器，服务器收到则将消息广播，客户机更新聊天消息。

客户端发送消息给服务器

messageSendButton.addEventListener('click',function() {var content = contentText.innerTextif(!content) return alert('请输入内容')socket.emit('sendMessage',{msg: content,username: username,photo: photo})
})

服务器收到消息进行广播

 socket.on('sendMessage', data => {io.emit('receiveMessage', data)})

客户端将消息填入聊天信息框

socket.on('receiveMessage', data => {if(data.username === username) {//自己的消息messagebox.innerHtml +=`<div class="mymessage"><img class="photo" src="${data.photo}" /><div class="content"><div class="msg">${data.msg}</div></div></div>`} else {//别人的消息messagebox.innerHtml +=`<div class="othermessage"><img class="photo" src="${data.photo}" /><div class="content"><div class="nickname">${data.username}</div><div class="msg">${data.msg}</div></div></div>`}
})

4.系统消息

当用户登录成功时，服务器广播登录成功消息，客户端在聊天窗口显示某用户进入聊天室。

当用户退出时，服务器广播退出消息，客户端在聊天窗口显示某用户退出聊天室。

三、项目演示

登录界面

聊天界面