基于Websocket的实时聊天室

qq_43669345 2022-01-18 18:40:45

一、项目简介

本次课程实验是仿照微信的界面，利用Node.js和WebSocket打造的即时聊天程序，因时间问题，没有采用数据库的连接，在后续会继续补充。项目的主要实现功能包括以下几个方面：

用户登录功能
登陆成功后显示个人信息以及加入群聊信息
显示系统当前用户列表和数量
离开聊天室后显示离开群聊信息
聊天的基本功能
用户间发送图片和表情

项目使用的技术有html+css+js+jquery+nodejs，在Vscode平台上进行开发，使用的主要框架为Socketio。前面几个技术比较熟悉，其中简单介绍一下Node.js。

Node.js的本质就是运行在服务端的JavaScript。Node.js是基于Chrome浏览器运行JavaScript时建立的一个平台。该平台可以非常快速以及高效的执行JavaScript，并且性能非常优越。Node.js还优化了一些特殊用例，内置了常用的API，这样使得该平台在非浏览器环境下运行得更好。因为其是运行在V8引擎下，所以本地先要安装node运行环境，然后通过node命令来执行js代码。以达到预期效果。

二、代码说明

基于Node.js和WebSocket的聊天室，主要包括前端页面，主要是用户操作的页面，还包括后台数据通信以及逻辑处理。整个程序分为大概三部分，包括前端显示页面，还有就是js脚本，最后一个是node服务，前端会用html，css，jQuery去实现，服务会用node.js去写，利用websocket去做通信，去做持久连接，达到通信聊天功能，最后开启node服务，运行脚本即可。

2.1 前端代码

前端页面用HTML+CSS+JavaScript来实现，整个聊天页面布局恰当。人性化的提示信息做的比较多。所以前端代码非常简单。就是一些DIV嵌套，固定各自的类名和ID。还有一些文本框和按钮，通过CSS来控制它们的样式，部分代码如下所示:

</ul>
    </div>
    
    <div class="box">
      
      <div class="box-hd">
        <h3>聊天室(<span id="userCount">99</span>)</h3>
      </div>
      
      <div class="box-bd">
      </div>
      
      <div class="box-ft">
        
        <div class="toolbar">
          <a href="javascript:;" title="表情" class="face"></a>
          <a href="javascript:;" title="截屏" class="screen-cut">
          </a>
          <a href="javascript:;" title="图片" class="file">
            <label for="file"></label>
            <input type="file" id="file" style="display: none;">
          </a>
        </div>
        
        <div class="content">
          
          <div class="text" id="content" contenteditable></div>
        </div>
        
        <div class="action">
          <span class="desc">按下Ctrl+Enter发送</span>
          <a class="btn-send" id="btn-send" href="javascript:;">发送</a>
        </div>
      </div>
    </div>
  </div>
  </div>

2.2 后端代码

聊天室的核心后台代码，就是启动Socketio服务，实现请求。并且监听固定端口号3000。通过WebSocket来实现前后端数据的通信。以下代码就是用Node.js的固定模块，实现前后端的通信连接。

var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server)
// 记录所有已经登录过的用户
const users = []

server.listen(3000, () => {
console.log('服务器启动成功了')
})

// express处理静态资源
// 把public目录设置为静态资源目录
app.use(require('express').static('public'))

app.get('/', function(req, res) {
res.redirect('/index.html')
})

io.on('connection', function(socket) {
  socket.on('login', data => {
    // 判断，如果data在users中存在，说明该用户已经登录了，不允许登录
    // 如果data在users中不存在，说明该用户没有登录，允许用户登录
    let user = users.find(item => item.username === data.username)
    if (user) {
      // 表示用户存在，登录失败. 服务器需要给当前用户响应，告诉登录失败
      socket.emit('loginError', { msg: '登录失败' })
      // console.log('登录失败')
    } else {
      // 表示用户不存在, 登录成功
      users.push(data)
      // 告诉用户，登录成功
      socket.emit('loginSuccess', data)
      // console.log('登录成功')

      // 告诉所有的用户，有用户加入到了聊天室，广播消息
      // socket.emit: 告诉当前用户
      // io.emit : 广播事件
      io.emit('addUser', data)

// 告诉所有的用户，目前聊天室中有多少人
io.emit('userList', users)

      // 把登录成功的用户名和头像存储起来
      socket.username = data.username
      socket.avatar = data.avatar
    }
  })

  // 用户断开连接的功能
  // 监听用户断开连接
  socket.on('disconnect', () => {
    // 把当前用户的信息从users中删除掉
    let idx = users.findIndex(item => item.username === socket.username)
    // 删除掉断开连接的这个人
    users.splice(idx, 1)
    // 1. 告诉所有人，有人离开了聊天室
    io.emit('delUser', {
      username: socket.username,
      avatar: socket.avatar
    })
    // 2. 告诉所有人，userList发生更新
    io.emit('userList', users)
  })

  // 监听聊天的消息
  socket.on('sendMessage', data => {
    console.log(data)
    // 广播给所有用户
    io.emit('receiveMessage', data)
  })

  // 接收图片信息
  socket.on('sendImage', data => {
    // 广播给所有用户
    io.emit('receiveImage', data)
  })
})

三、界面展示

3.1 用户登录

用户输入用户名，选择头像，选择完毕就登陆成功。（因为没有实现数据库的功能，所以，把验证的步骤暂且跳过），如图1所示。

图1 用户登录界面展示

3.2 聊天界面

聊天室有如下功能：
(1)对聊天室内当前在线人数进行统计，并按照进入聊天室顺序在左侧进行排列显示。
(2)新用户加入聊天室会有提示说明，包括用户名和进入聊天室时间。
(3)用户退出聊天室会有提示说明，包括退出用户的用户名和离开聊天室时间。
(4)对加入聊天室的新用户有历史记录显示，让新用户不错过任何历史聊天信息。
3.2.1 聊天主界面展示

用户登录后，进入聊天界面，可以在左侧查看现在聊天室的用户信息，如图2所示。

图2 用户登录后主聊天界面

新用户在登录聊天室时，所有用户都有加入提示，离开时用户们都有离开提示，如图3所示。

图3 用户进入离开聊天室提示

3.2.2 用户发送消息

用户加入聊天室时可以给其他用户发送消息，如图4所示。

图4 用户聊天

3.3 发送图片和表情

用户除了可以发送文字信息，还可以发送表情和图片信息，如图5、6、7所示。

图5 用户可以选择发送表情

图6 发送表情结果

图7 发送图片

图8 发送图片结果

四、总结

这个聊天室的主要难点在用没有过多接触过的Node.js对前端数据的处理以及前后端数据的通信。一方面自己接触的后台语言本来也不多，再加上平时主要是写静态的前端页面，前后端结合来写，经历不是非常多。所以，刚开始并不知道如何进行前后端的数据通信，最后通过自己学习摸索，从最开始的安装Node环境，到最后学会利用Node.js的request模块来启动服务，并监听固定端口，实现前后端的简单链接。

作者：NP362

...全文