vue+express的在线聊天室demo实现

True Love 2022-01-16 21:46:42

项目简介

本项目借助vue + express 实现了在线chatroom的demo。

通过注册页面每个用户都能注册自己的身份并进入一个在线聊天室进行聊天。聊天室不仅仅只能发送文字，还可以在emoj列表中选取表情发送。

设计方案

本项目是一个前后端分离的项目，前端的client与后端的server通信是基于socket.io进行实现的。前端部分的实现是另一位同学的工作，我主要负责后端部分的架构编写以及前端部分的路由分发。

路由分发：根据访问的路由信息不同跳转到不同的页面以及处理函数。
加入群聊：在前端部分刚注册好的用户将会加入群聊
推出群聊：用户可以主动退出群聊
监听消息：用户在群聊中发送了消息，所有在此聊天室中的人员将都会收到

代码实现

路由分发：定义5个全局常量：Layout, Chatroom, List, Home, Login。这五个常量分别对应了登录模块，聊天室页面模块，聊天室列表模块，主页模块，页面布局模块。这五个模块的具体实现是由前端同学实现的，放置于layout和page文件加中。在注册登陆的时候不允许账号是空的，所以在这部分最后的内容中加上对账号的非空判断，若是账号为空的话，那么将重新进入登录页面。

import Vue from 'vue'
import vueRouter from 'vue-router'
import {
    Toast
} from 'vant'

Vue.use(vueRouter)

const Layout = () => (import('@/layout/index.vue'));
const ChatRoom = () => (import('@/pages/chatRoom/index.vue'));
const List = () => (import('@/pages/list/index.vue'));
const Home = () => (import('@/pages/home/index.vue'));
const Login = () => (import('@/pages/login/index.vue'));

const router = new vueRouter({
    mode: 'history',
    routes: [{
            path: "/",
            name: 'Layout',
            component: Layout,
            redirect: "/list",
            children: [{
                    path: '/home',
                    name: 'Home',
                    component: Home
                },
                {
                    path: '/list',
                    name: 'List',
                    component: List
                },

            ],

        },
        {
            path: '/chatRoom',
            name: 'ChatRoom',
            component: ChatRoom
        },
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/*',
            redirect: '/home'
        }
    ]
})

router.beforeEach((to, from, next) => {
    if (to.path === '/login') {
        next();
    } else {
        const a = localStorage.getItem('Account');
        if (a === "" || !a) {
            Toast.fail('账号不存在');
            next('/login');
        } else {
            next()
        }
    }
})

export default router;

管理群聊消息：根据建立的socket连接，如果是"join",那么判断此消息是加入群聊，并将用户加入的情况广播到所有人的列表中。如果是"dicconnect",那么就是用户选择退出群聊，将此信息广播。如果是"client"，那么就是已经进入注册好的用户在群聊当中发消息，将其发送的消息在本群聊进行相应的广播。当启动对客户端消息的监听时，控制台会输出“监听开始”，提示已经正常启动。

在这里我们监听的是8081端口，如若将本项目部署在服务器上记得开放8081端口，我忘记开放调试了很久。

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http, {
    cors: true //解决跨域问题
});

io.on('connection', function (socket) {
    let name = '';
    // 加入群聊
    socket.on("join", function (message) {
        name = message.name;
        socket.broadcast.emit("joinNoticeOther", {
            name,
        });
    })

    //退出群聊
    socket.on("disconnect", function () {
        io.emit("disconnection", {
            name,
        });
    });

    //监听消息
    socket.on("client", function (message) {
        // 向所有客户端广播发布的消息
        io.emit("message", message);
    });
});

//当访问根目录时，返回Hello World
app.get('/', function (req, res) {
    res.send('<h1>Hello world</h1>');
});

//启动监听
http.listen(8081, function () {
    console.log('listening on ' + ' http://192.168.10.42:8081');
});