Các dev flutter có nhu cầu viết ứng dụng realtime chat bot hoặc các comment realtime trong các ứng dụng đơn giản cần sử dụng socket io. Vậy bài này mình hướng dẫn connect flutter.

connect socket io flutter với nodejs socket io

2021-07-23 1581 lượt xem
Trương Thanh Hùng

Khởi tạo nodejs chat đơn giản với socket server 2.3

Mình sẽ sử dụng Express application generator để tạo 1 ứng dụng nodejs nhanh. Bạn có thể tham khảo thêm ở 2 bài viết này : 

Tạo 1 app nodejs đầu tiên sử dụng Express application generator 2021 và bài viết hướng dẫn nhúng socket vào: socket vào generated Express-Generator application

Cụ thể mình gõ lệnh sau: 

mkdir server
cd server
npx express-generator 

Bạn cần thêm node_modules vào hệ thống để chạy chương trình nodejs vừa tạo: 

npm i

chạy ứng dụng nodejs vừa tạo ra với lệnh: 

DEBUG=server:* npm start

Kết quả: 

 nodejs 3000

Tạm thời tắt kết nối server để cài socket io vào: 

npm install socket.io@2.3.0

Tạo file app.socket.js cùng cấp với app.js với 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;

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. Như ảnh: 

chạy ứng dụng nodejs vừa tạo ra với lệnh: 

DEBUG=server:* npm start

Khởi tạo ứng dụng flutter

Trước khi khởi tạo ứng dụng mình muốn bạn check phiên bản flutter bạn đang dùng: 

flutter --version

Để khởi tạo dự án flutter bạn cần chạy lệnh sau dưới terminal: 

flutter create demo_chat

 flutter create success

Thêm package socket io client 1.0.1

Chúng ta sẽ thêm package socket để connect đến server là flutter socket client phiên bản 1.0.1 như sau: 

# Đi vào app chat 
cd demo_chat
#thêm package
flutter pub add socket_io_client

khi đó bạn vào file sẽ thấy : 

kết quả file pubspec.yaml

Sửa đổi code file main.dart để connect socket client

code flutter trên doc tựa tựa thế này : 

import 'package:socket_io_client/socket_io_client.dart' as IO;

main() {
  // Dart client
  IO.Socket socket = IO.io('http://localhost:3000');
  socket.onConnect((_) {
    print('connect');
    socket.emit('msg', 'test');
  });
  socket.on('event', (data) => print(data));
  socket.onDisconnect((_) => print('disconnect'));
  socket.on('fromServer', (_) => print(_));
}

Mình sửa code 1 tí như này: 

import 'package:flutter/material.dart';
import 'package:socket_io_client/socket_io_client.dart' as IO;

const URI_SERVER = 'http://153.126.149.633:9999';
void main() {
  /// khởi tạo đối tượng socket
  /// // Dart client
  IO.Socket socket = IO.io(
      URI_SERVER,
      IO.OptionBuilder().setTransports(['websocket']) // for Flutter or Dart VM
          .setExtraHeaders({'foo': 'bar'}) // optional
          .build());

  socket.onConnect((_) {
    print('connect');
  });
  // Replace 'onConnect' with any of the above events.
  socket.onConnect((_) {
    print('connect');
  });
  socket.on('connect_error', (data) {
    print(data);
  });
  socket.onDisconnect((_) => print('disconnect'));

  runApp(MyApp());
}

connect flutter socket success 

Còn đây là khi connect lỗi: