（更新中）使用Vue+Node.js+Express+Socket.io+MySql实现完整版简单聊天室

github地址：https://github.com/DannyZeng2/EasyChat-Plus

1 使用技术

• 前端 Vue 2.6 + ElementUI
• 后端 Node.js 14.11.0 + Express 4.16.1
• 消息推送 Socket.io 4.0
• 数据存储 MySql 8.0.19存储用户信息，localStorage存储本地聊天记录

2 实现功能

• 用户登录与注册 （已完成✔️）
• 加入和离开群聊通知 （已完成✔️）
• 群聊功能 （已完成✔️）
• 发送文字信息 （已完成✔️）
• 聊天记录本地存储 （已完成✔️）
• 发送表情包 （已完成✔️）
• 发送图片/视频 （未完成❌）
• 私聊功能 （未完成❌）
• 用户头像上传 （未完成❌）
• 其他待定 （❔）

3 Demo 展示

3.1 登录与注册页面

登录

注册

3.2 聊天主页面

主页面1

主页面2

4 主要代码

4.1 创建表

CREATE TABLE `user` (
  `id` varchar(255) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `phone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `register_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) 

4.2 前端代码

Login.vue

Chat.vue

4.3 后端代码

app.js

const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const http = require('http');
const app = express();
const server = http.createServer(app);
const socketIO = require('socket.io')
const io = socketIO(server, {
  cors: {
    origin: '*'
  }
});
const ws = require('./controller/websocket_controller');

ws.chat(io)

const indexRouter = require('./routes/index');

app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);\

server.listen('3000',() =>{
  console.log('正在监听port:3000...')
});

router/index.js

const express = require('express');
const router = express.Router();
const userController = require('../controller/user_controller');

router.get('/login', userController.login);
router.post('/register', userController.register);

module.exports = router;

db_config.js

const mysql = require('mysql')

module.exports = {
  config: {
    host: 'localhost',
    port: '3306',
    user: 'root',
    password: '123456',
    database: 'easychat'
  },

  getDBConnection(sql, params, callback) {
    let connection = mysql.createConnection(this.config);
    connection.connect();
    connection.query(sql, params, callback);
    connection.end();
  }
}

user_controller.js

const dbConfig = require('../utils/db_config')
const uuid = require('uuid');

login = (req, res) => {
  let username = req.query.username
  let password = req.query.password
  let params = [username, password]
  let sql = 'select username,password from user where username=? and password=?'
  console.log(sql)
  dbConfig.getDBConnection(sql, params, (error, results, fields) => {
    console.log(results)
    if (error) {
      res.send({ data: results, success: false, message: '登录失败！' })
    } else if (results.length === 0) {
      res.send({ data: results, success: false, message: '用户名或密码错误！' })
    } else {
      res.send({ data: results, success: true, message: '登录成功!' })
    }
  })
}

register = (req, res) => {
  console.log(req)
  let username = req.query.username
  let password = req.query.password
  let phone = req.query.phone
  let register_time = new Date()
  let params = [uuid.v1().toString(), username, password, phone, register_time]
  console.log(params)
  let sql = 'insert into user(id,username,password,phone,register_time) VALUES(?,?,?,?,?)'
  dbConfig.getDBConnection(sql, params, (error, results, fields) => {
    if (error) {
      res.send({ success: false, message: '注册失败！' })
    } else {
      res.send({ success: true, message: '注册成功!' })
    }
  })
}

module.exports = {
  login,
  register
}

websocket_controller.js

chat = (io) => {
  let count = 0
  let users = []
  io.on('connection', socket => {
    console.log('user connected')
    count++

    socket.on('login', (data) => {
      socket.username = data
      console.log(`${data}加入了聊天室`)
      const user = users.find(item => item === data)
      if (user) {
        socket.emit('loginError')
        console.log(user)
      }else {
        users.push(data)
        console.log(users)
        io.sockets.emit('user_enter', `${data}加入了聊天室`)
        io.sockets.emit('count_users', users)
      }
    })

    socket.on('send_msg', (data) => {
      console.log(`收到客户端的消息：${data}`)
      io.sockets.emit('broadcast_msg', {
        username: data.username,
        input: data.input,
        time: new Date().toLocaleString()
      })
    })

    socket.on('disconnect', () => {
      let index = users.findIndex(item => item === socket.username)
      users.splice(index,1)
      console.log('user disconnected')
      io.sockets.emit('user_leave', `${socket.username}离开了群聊`)
      io.sockets.emit('count_users', users)
    });
  });
}

module.exports = {
  chat
}