基于socket.io的web聊天室

基于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.innerText
	if(!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.系统消息

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

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

三、项目演示

登录界面

聊天界面