Bạn cần thêm socket vào ứng dụng Express-Generator application? Tìm đúng nơi rồi bạn ơi :D

Nhúng socket vào generated Express-Generator application

2021-07-03 1431 lượt xem
Nguyễn Văn Sơn

Socket.IO

Socket.IO là một thư viện để giao tiếp thời gian thực giữa server và client. Bạn tạm hiểu là đối với web truyền thôgns thì việc client muốn xem cái gì hay thao tác gì thì sẽ gửi 1 reqquest lên server. từ đó Server sẽ xử lý và trả về cho client những thứ mà client mong thấy được.

Như vậy thì nếu server tự dưng muốn báo cho client 1 dữ liệu gì mới sẽ không thể làm theo cách thông thường này được. 

Vậy, Hơi ngược với hành vi yêu cầu của client như trên. Socket io là thư việc giữ kết nối thông qua tcp để lúc nào server muốn bắn dữ liệu cho client thì cứ quất thôi 😄 

Cách install socket io vào ứng dụng

1. Cài đặt ứng dụng bằng Express Generator

Phần 1 mình có trình bày rồi: bạn xem lại https://ebudezain.com/tao-1-app-nodejs-dau-tien-su-dung-express-application-generator-2021

sau khi có cấu trúc thư mục như này : 

Chúng ta Install the socket IO

2. Install the socket IO

# khuyến nghị chỉ sài nếu bạn chỉ có nhu cầu realtime web
npm install socket.io --save 
# khuyến nghị bạn cài nếu bạn muốn cả web lẫn app tại năm 2021
npm install socket.io@2.3.0

với cách làm trên thì socket io sẽ cài version mới nhất vào. mình khuyến nghị các bạn không nên cài version mới nếu muốn code app mobile flutter. Tạo thời điểm 07/2021 mình viết bài thì việc flutter đang support version ổn định là socket io 2.3. lúc đấy flutter cài version này : 

https://pub.dev/packages/socket_io_client socket_io_client 1.0.1 nhớ chọn version 1.0.1 nghen 

Thêm code vào cho socket start cùng app

1. vào bin/www thêm code sau : 

chủ yếu là dòng số 10: var eventIO = require('../app.socket'); để reqquire cái event trong file app.socket.js vào hệ thống. còn dòng 24 để khai báo caí event cho lắng nghe cùng với cái app của express khi start thành công.

2. tạo 1 file ngang cấp với app.js là file app.socket.js

file app.socket.js là file để đăng ký các event ví dụ connect thành công thì làm gì, hoặc ai gửi tin nhắn đến thì làm gì. nội dung như sau : 

const io = require( "socket.io" )();
const eventIO = {
    io: io
};

// Add your socket.io logic here!
io.on( "connection", function( socket ) {
    console.log( "có 1 connect với socket id : "+ socket.id );

    console.log("have connect: " + socket.id )
        
    socket.on( 'disconnect', async function () {

        console.log( "disconnect set user offline")
        socket.leaveAll()
    })
});
// end of socket.io logic

module.exports = eventIO;

Đến đây căn bản là thành công rồi, nhưng bạn chắc cũng muốn check xem thực sự đã chạy được chưa đúng không? 

Kiểm tra Connect socket có thành công hay thất bại

chỉnh file views/index.ejs với nội dung như sau: 

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.4/socket.io.js"></script>
    <script type="text/javascript">
      const socket = io.connect('http://localhost:3000');
      console.log("connected ở đây không thành công đâu " + socket.connected);
      socket.on('connect', function() {
        console.log("Successfully connected!");
        if(socket.connected){
          console.log("connected ở đây sẽ thành công " + socket.connected);
        }
      });
    </script>
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
  </body>
</html>

Chạy server lên : 

npm start

mở trình duyệt lên http://localhost:3000

Đây là kết quả khi mở console trong trình duyệt: 

 

Đây là kết quả của server

những tag
bài viết trong chủ đề