Video học lập trình mỗi ngày

Mô hình MVC cho đến thời điểm này thì theo tôi vẫn giữ một vị trí đặc biệt, mặc dù đã có những pattern khác ra đời. MVC giúp chúng ta chia nhỏ modules mà dễ dàng quản lý, và socketio sẽ được tích hợp như thế nào?

Câu hỏi về Socket io

Trong Fanpage TipJS có post một câu hỏi về SocketIO, giống như tiêu đề của bài viết. Câu hỏi như sau: Mọi người cho em hỏi làm sao để viết socket.io trong controller ạ. Em viết trong file server thì được nhưng không biết viết trong controller. Mọi người chỉ em với ạ.

Tôi nghĩ câu hỏi này rất cần thiết vào lúc này khi lược tương tác câu hỏi này khá nhiều, theo suy nghĩ thì đó là vấn đề được các bạn quan tâm. Hy vọng bài viết này sẽ giúp bạn có một cấu trúc khá đầy đủ theo mô MVC.

Để hiểu tốt nhất về mô hình MVC thì tôi đã giới thiệu một pattern chuẩn trong video Cấu trúc dự án API REST từ lv1 đến lv4 các bạn có thể tham khảo, và nếu như trong quá trình tham khảo bạn nào có ý tưởng hay có một pattern nào hay hơn thì xin mời cùng bàn luận, chúng ta có thể học hỏi lần nhau.

Video Socket io trong mô hình MVC Express

Tích hợp socket io vào controller express theo MVC

Đầu tiên chúng ta sẽ clone một repo được triển khai làm ví dụ trong trang chủ socket.io và sử dụng command sau:

git clone https://github.com/socketio/chat-example.git socket-chat-express-mvc

Vì project này không sử dụng MVC nên chúng ta phải làm lại theo câu hỏi trên. Hay xem xét những đoạn code sau, nếu không hiểu vui lòng xem video mà tôi đã trình bày một cách rõ ràng, và nếu có câu hỏi vui lòng để lại comment dưới video, chúng ta sẽ tiếp tục làm rõ hơn.

File: index.js

const  app  =  require('express')();
const  http  =  require('http').Server(app);
const  io  =  require('socket.io')(http);
const  port  =  process.env.PORT  ||  3000;
const  SocketServices  =  require('./src/services/chat.service')
// can chu y toi khai niem global duoc gioi thieu trong video
global.__basedir  =  __dirname;
global._io  =  io;  // cach 2

// app.get('/', (req, res) => {
// res.sendFile(__dirname + '/index.html');
// });
// io.on('connection', (socket) => {
    // socket.on('chat message', msg => {
    //         io.emit('chat message', msg);
    // });
// });
// cach 1: use middleware express
// app.use( (req, res, next) => {
// res.io = io;
// next()
// })
app.use(require('./src/routes/chat.route'))
global._io.on('connection',  SocketServices.connection)
http.listen(port,  ()  =>  {
    console.log(`Socket.IO server running at http://localhost:${port}/`);
});

File: src/routes/chat.route.js

const  express  =  require('express')
const  route  =  express.Router();
const  {homepage,  message}  =  require('../controllers/chat.controller')

route.get('/',  homepage)
route.get('/api/message',  message)

module.exports  =  route;

File: src/controllers/chat.controller.js

var  that  =  module.exports  =  {

    homepage:  async(req,  res,  next)  =>  {
        res.sendFile(__basedir  +  '/index.html');
    },

    message:  async(req,  res,  next)  =>  {
        const  {  msg  }  =  req.query;
        // const io = res.io;
        _io.emit('chat message',  msg)
        return  res.json({  code:  200,  msg})
    }
}

File: src/services/chat.service.js

class  SocketServices{

    //connection socket
    connection(  socket  ){
        socket.on('disconnect',  ()  =>  {
        console.log(`User disconnect id is ${socket.id}`);
    })

    // event on here

    socket.on('chat message',  msg  =>  {
        console.log(`msg is:::${msg}`)
        _io.emit('chat message',  msg)
    })

    // on room...
}
module.exports  =  new  SocketServices();

Chú ý: File index sẽ require file service.

Source code

Git:

git clone https://github.com/anonystick/socket-express-mvc-structure.git

Tks!