- Bản thân express không được xây dựng theo cấu trúc MVC hay bất kỳ cấu trúc nào khác. Và rồi
express-generatornhư một giải pháp để tạo dựng project gần giống với MVC, thay vì nhồi code tất cả (Route, Middleware, …) vào cùng 1 file duy nhất. Rất tiện dụng phải ko nào… - Còn việc thêm socket.io thì sao?? Trước hết nói qua về
express-generatorthì file./bin/wwwchính là nơi máy chủ Express khởi tạo chứ ko phải làapp.jsnhư nhiều người lầm tưởng, nên việc thêm socket.io là có chút khó khăn và trang docs của Socket.IO cũng ko chỉ rõ điều này (╥╥).. Nếu bạn đang thắc mắc như mình thì bài viết này là câu trả lời cho bạn 👏👏👏
1. Khởi tạo project & install socket.io
express socket-io-with-express # khởi tạo project với express-genrator
cd socket-io-with-express
npm install # cài đặt các dependencies
npm install socket.io --save # thêm socket.io
Cấu hình
Tạo thêm 1 file có tên socket.js tại folder ./routes với nội dung như sau
// ./routes/socket.js
var express = require('express');
var router = express.Router();
module.exports = (io) => {
io.on('connection', socket => {
let { id } = socket;
console.log('new connection id:', id);
socket.on('disconnect', socket => {
console.log('disconnect id:', id);
});
});
return router;
}
Trong đoạn code trên, mình tách code xử lý realtime ra thành 1 file riêng để thực hiện như 1 route, và gắn nó vào server thông qua app.use()
Tại app.js
// app.js
...
var app = express();
var io = require('socket.io')();
app.io = io;
...
/* truyền thằng io xuống cho router socketRouter xử lý */
var socketRouter = require('./routes/socket')(io);
app.use('/', socketRouter); // lưu ý là path phải là '/'
app.use('/', indexRouter);
app.use('/users', usersRouter);
...
module.exports = app;
Trong đoạn code trên mình đã gắn biến io cho thằng app rồi thì trong ./bin/www mình sẽ lôi nó ra rồi attach lên server như sau
// ./bin/www
...
var server = http.createServer(app);
var io = app.io;
io.attach(server);
...
Chỉnh file ./views/index.ejs để test với nội dung
<!-- ./views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Socket.IO love ExpressJS</title>
</head>
<body>
<h1>Socket.IO love ExpressJS @tranphuquy19</h1>
<script src="socket.io/socket.io.js"></script>
<script>
let url = window.location.origin;
let socket = io(url);
</script>
</body>
</html>
Mở http://localhost:3000 trên trình duyệt và kết quả như sau…
Chúc bạn thành công!
- Full code: Github