socket.io实现多人聊天

socket.io 实现多人聊天室

网上看到这篇文章觉得挺有意思，看到这个效果图，于是决定自己实现一下。参考文章

一、参考效果图

二、设计思路图

三、代码实现

1.初始化项目，下载需要的依赖包，以下是整个项目的依赖文件

npm init
npm i koa koa-router koa-static koa-views socket.io -S

2.注册逻辑,前端是简单的 form 表单提交，但是这里注意，有文件上传，Content-Type 需改为’multipart/form-data’，服务器代码如下，连接了 mysql 数据库，把用户注册信息存至 student 表中

const Router = require('koa-router');
const router = new Router();

const multer = require('@koa/multer');
const upload = multer({
    dest: 'public/imgs' });
const conn = require('../config/db.config');

router.get('/', async (ctx, next) => {
   
  await ctx.render('register');
});

router.post('/', upload.single('avatar'), async (ctx, next) => {
   
  const {
    username, password } = ctx.request.body;
  const avatar = `/imgs/${
     ctx.file.filename}`;
  const connection = await conn();
  try {
   
    const [
      rows,
    ] = await connection.execute(
      'insert into student(name,password,avatar) values(?,?,?)',
      [username, password, avatar]
    );
    if (rows?.affectedRows) {
   
      ctx.body = {
   
        code: 0,
        msg: '注册成功',
      };
    }
  } catch (error) {
   
    ctx.body = {
   
      code: -1,
      msg: '注册失败，该用户已存在',
    };
  }
});

module.exports = router;

3.登录逻辑，前端是简单的 form 表单提交，服务器代码如下

const Router = require('koa-router');
const router = new Router();

const conn = require('../config/db.config');
const JWT = require('../utils/jwt');

router.get('/', async (ctx, next) => {
   
  await ctx.render('login');
});

router.post('/', async (ctx, next) => {
   
  const {
    username, password } = ctx.request.body;
  const connection = await conn();
  const [
    rows,
  ] = await connection.execute(
    'select * from student where name = ? and password = ?',
    [username, password]
  );
  if (rows.length) {
   
    const payload = {
   
      username,
      password,
    };
    const token = JWT.generate(payload, '1d');
    ctx.set('authorization', token);
    ctx.body = {
   
      code: 0,
      msg: '登录成功',