基于node.js,socket.io,原生js实现的在线实时聊天程序

w497619

已于 2023-12-29 11:02:55 修改

阅读量1.1k

点赞数 19

文章标签： node.js 服务器

于 2023-12-28 18:24:02 首次发布

本文链接：https://blog.csdn.net/w497619/article/details/135272331

版权

网络程序设计专题报告

学号：329

一、项目简介

本聊天系统是基于node.js，socket.io，原生js实现在线聊天web。

Socket.IO 是一个库，可以在客户端和服务器之间实现 低延迟, 双向和 基于事件的 通信。

前端页面的开发使用Vue框架进行，并使用了简单的原生js开发的一个简单页面。

本文将使用Node.js加web socket协议打造一个网页即时聊天程序。

源码可访问项目的Github仓库进行查看，下载，并进行本地部署

本地运行方法：

在文件夹中打开终端，命令行运行npm i
在文件夹中，打开终端并运行 npm run start
打开浏览器访问localhost

下图为项目预览效果图：

二、准备工作

本文示例环境为Windows，Linux也就Node的安装与命令行稍有区别，程序实现部分与平台无关。

你需要在本机安装Node.js，建议版本为18.16.1以上，以下并未进行过测试
多少需要一点Node.js的基础知识，因为未曾了解过Node.js的话，你可能连项目都运行不起来
Node.js中使用socket的一个包，可以很方便地建立服务器到客户端的sockets连接，发送事件与接收特定事件，因此你需要安装这个包： npm install socket.io。安装这个包可能遇到npm报错，报错的原因可能是你之前使用过cnpm的原因，因此报错了使用cnpm下载依赖包即可。

三、前端实现

3.1前端代码实现

为了可以在程序运行时实时的发送消息，使用js中的钩子方法进行相关消息的接收：

 mounted() {}

实现登录：

login() {
            if (this.userInfo.name == "") {
                this.Toast("输入你姓名，第一宇宙战士", "alert-danger");
                return;
            }
            this.socket.emit("login", {
                ...this.userInfo
            })
        }

简单的socket连接以及登录提示：

const socket = io.connect("/");
        this.socket = socket;

        socket.on("message", (mes) => {
            this.Allmessage.push(mes)

        })
        socket.on("login", (userInfp) => {
            if (userInfp["repeat"]  === true)
             {
                this.Toast(`群星名称：${userInfp.name},重复，请重新输入`, "alert-danger");   
            }else
            {
                if (this.userInfo.name !== userInfp.name) {
                    this.Toast(`宇宙大帝之一：${userInfp.name}上线了，快来和他聊天吧~`, "alert-info");
                } else {
                    this.Toast(`尊贵的宇宙大帝：${userInfp.name}，欢迎进入宇宙聊天群`, "alert-info");
                    this.userInfo = userInfp
                    this.main = false;
                    socket.emit("init", JSON.stringify(this.userInfo))
                }
            }
         
        })

对接收到的数据userInfp进行相关判断，并输出。就可以实现简单的接收后端消息了。js是脚本语言，${userInfp.name}也就是一个取值的过程。

退出聊天群的提示实现：

socket.on("loginOut", (userInfo) => {
            this.Toast(`宇宙大帝：${userInfo.name}已下线~`, "alert-info")
            let newList = this.userList.map(user => {
                if (user.name === userInfo.name) {
                    user.onLine = false;
                }
                return user
            })
            this.userList = newList
        })

剩下更多的内容，如果想要了解，可以前往代码仓库查看。

3.2前端效果展示

登录页面：

进入聊天系统提示：

退出聊天系统提示：

四、后端实现

4.1后端代码实现

实现端口监听：

const http = require("http")
const moment = require("moment");
const express = require('express');
const app = express()
app.use(express.static('src'))
const server = require('http').createServer(app);
const io = require('socket.io')(server);
server.listen(8080, function () {
    console.log("node server run at " + 'http://localhost:8080');
})

实现登录功能：

socket.on("login", function (userInfo) {

        if (userInfoList.some(u => u.name === userInfo.name && u.onLine === true)) {
            userInfo.repeat = true;
            socket.emit("login", userInfo) 
        } else {
            userInfo.id = socket.id
            userInfo.onLine = true
            if (userInfoList.every(user => user.name !== userInfo.name)) {
                userInfoList.push(userInfo)
                console.log("登录群星聊天系统成功");
            } else {
                let oldUserIndex = userInfoList.findIndex(user => user.name === userInfo.name)
                userInfoList[oldUserIndex] = userInfo;
                console.log("再次登录群星聊天系统成功");
            }
            io.emit("login", userInfo) 
        }
    })

实现列表初始化：

socket.on("init", function (userInfo) {
        io.emit("init", {
            user: userInfoList,
            room: roomList,
            message: messageList
        })
    })

4.2session数据持久化

const USER = 'user'
const HISTORY = 'history'
export const getUserList = () => {
  const result = sessionStorage.getItem(USER)
  return result ? JSON.parse(result) : []
}
export const setUser = (user) => {
  sessionStorage.setItem(USER, JSON.stringify(user))
}
export const getHistoryMessage = () => {
  const mesg = sessionStorage.getItem(HISTORY)
  return mesg ? JSON.parse(mesg) : []
}// 获取之前的消息
export const setHistoryMessage = (history) => {
  sessionStorage.setItem(HISTORY, JSON.stringify(history))// 更新新的记录消息