前端架构师成长计划

1. 初始化项目 #

egg-init zfchat-api --type=simple

2. 支持socket.io #

2.1 安装egg-socket.io #

cnpm i egg-socket.io -S

namespace: 通过配置的方式定义namespace(命名空间)
middleware: 对每一次socket连接/断开、每一次消息/数据传递进行预处理
controller: 响应socket.io的event事件
router: 统一了socket.io的event与框架路由的处理配置方式

2.2 安装启动插件 #

config\plugin.js

exports.io = {
    enable:true,
    package:'egg-socket.io'
}

2.2 配置路由 #

app\router.js

'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  //io 你可以把它当成 require('socket.io')
  const { router, controller, io } = app;
  router.get('/', controller.home.index);
  //当服务器收到客户端的addMessage事件之后，会交给addMessage方法来处理
  //向服务器发射一个新的消息，并且让服务器广播给所有的客户端
  io.route('addMessage', io.controller.room.addMessage);
  //获取所有的历史消息
  io.route('getAllMessages', io.controller.room.getAllMessages);
  //注册或者登录
  router.post('/login', controller.user.login);
  //验证用户身份
  router.post('/validate', controller.user.validate);
  //创建新的房间
  router.post('/createRoom', controller.rooms.createRoom);
  //返回所有的房间列表
  router.get('/getAllRooms', controller.rooms.getAllRooms);
};

2.3 配置控制器 #

app\io\controller\room.js

const { Controller } = require('egg');
class RoomController extends Controller {
    async addMessage() {
        let { ctx, app } = this;
        //{user,room,content}
        let message = ctx.args[0];
        let doc = await ctx.model.Message.create(message);
        doc = await ctx.model.Message.findById(doc._id).populate('user');
        //此入应该是向某个房间内广播 
        app.io.emit('messageAdded', doc.toJSON());
    }
    async getAllMessages() {
        let { ctx, app } = this;
        let room = ctx.args[0];
        let messages = await ctx.model.Message.find({ room }).populate('user').sort({ createAt: -1 }).limit(20);
        ctx.socket.emit('allMessages', messages.reverse());
    }
}
module.exports = RoomController;

2.4 配置插件 #

  config.io = {
    namespace: {
      "/": {
        connectionMiddleware: ["connect"],
        packetMiddleware:[]
      }
    }
  }

namespace: 通过配置的方式定义namespace(命名空间)
middleware: 对每一次socket连接/断开、每一次消息/数据传递进行预处理
controller: 响应socket.io的event事件
router: 统一了socket.io的event与框架路由的处理配置方式

2.5 编写中间件 #

const SYSTEM = {
    name: '系统',
    email: 'admin@126.com',
    avatar: 'http://www.gravatar.com/avatar/1e6fd8e56879c84999cd481255530592'
}
module.exports = app => {
    return async function (ctx, next) {
        const { app, socket, query: { token, room } } = ctx;
        if (token && token != '') {
            const user = app.jwt.verify(token, app.config.jwt.secret);
            if (user) {
                const id = socket.id;
                const nsp = app.io;
                await ctx.model.User.findByIdAndUpdate(user._id, { $set: { online: true, room } });
                socket.join(room);
                socket.broadcast.to(room).emit('online', {
                    user: SYSTEM,
                    content: `用户${user.name}加入聊天室`
                });
                await next();
                await ctx.model.User.findByIdAndUpdate(user._id, { $set: { online: false, room: null } });
                socket.leave(room);
                socket.broadcast.to(room).emit('offline', {
                    user: SYSTEM,
                    content: `用户${user.name}离开聊天室`
                });
            } else {
                socket.emit('needLogin');
            }

        } else {
            socket.emit('needLogin');
        }
    }
}

2.6 配置脚本 #

框架是以 Cluster 方式启动的，而 socket.io 协议实现需要 sticky 特性支持，否则在多进程模式下无法正常工作。修改 package.json 中 npm scripts 脚本：

{
  "scripts": {
    "dev": "egg-bin dev --sticky",
    "start": "egg-scripts start --sticky"
  }
}

2.7 测试 #

server\server.js

var express = require('express');
var app = express();
var path = require('path');
var server = require('http').createServer(app);
app.use(express.static(path.join(__dirname, 'public')));
var io = require('socket.io')(server);
var port = process.env.PORT || 3000;

server.listen(port, () => {
    console.log('Server listening at port %d', port);
});

server\public\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="send()">发送</button>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket = io('http://localhost:7001/');
        socket.on('connect', function () {
            console.log('连接成功');
            socket.emit('getAllMessages');
        });
        socket.on('messageAdded', function (message) {
            console.log(message);
        });
        socket.on('allMessages', function (messages) {
            console.log(messages);
        });
        socket.on('online', function (message) {
            console.log(message);
        });
        socket.on('offline', function (message) {
            console.log(message);
        });
        function send() {
            socket.emit('addMessage', { content: '你好' });
        }
    </script>
</body>

</html>

3.支持mongoose #

3.1 安装 #

cnpm i egg-mongoose --save

3.2 启动插件 #

config\plugin.js

exports.mongoose = {
    enable: true,
    package: 'egg-mongoose'
}

3.3 配置插件 #

config\config.default.js

exports.mongoose = {
  client: {
    url: 'mongodb://127.0.0.1/zfchat',
    options: {},
  },
};

3.4 配置消息模型 #

module.exports = app => {
    const mongoose = app.mongoose;
    const Schema = mongoose.Schema;
    const ObjectId = Schema.Types.ObjectId;
    const MessageSchema = new Schema({
        content: String,
        user: {
            type: ObjectId,
            ref: 'User'
        },
        room: {
            type: ObjectId,
            ref: 'Room'
        },
        createAt: { type: Date, default: Date.now }
    });
    return mongoose.model('Message', MessageSchema);
}

4. egg-jwt #

4.1 安装egg-jwt #

cnpm i egg-jwt -S

4.2 启用egg-jwt #

exports.jwt = {
    enable:true,
    package:'egg-jwt'
}

4.3 配置jwt #

config.jwt = {
   secret: 'zfpx'
}
config.security = {
   csrf: false
}

5. egg-cors #

5.1 安装egg-cors #

cnpm i egg-cors -S

5.2 启用egg-cors #

exports.cors={
    enable: true,
    package:'egg-cors'
}

5.3 配置egg-cors #

config.security={
    domainWhiteList:['http://localhost:3000'],
    csrf:false
  }

6. 实现用户登录 #

6.1 注册模型 #

module.exports = app => {
    let mongoose = app.mongoose;
    let Schema = mongoose.Schema;
    let ObjectId = Schema.Types.ObjectId;
    let UserSchema = new Schema({
        name: String,
        email: String,
        avatar: String,
        online: { type: Boolean, default: false },
        room: {
            type: ObjectId,
            ref: 'Room'
        },
        createAt: { type: Date, default: Date.now }
    });
    return mongoose.model('User', UserSchema);
}

6.2 添加路由规则 #