Xây dựng web chat đơn giản với nodejs và socket

Avatar admin | April 7, 2023

Xây dựng web chat để xây dựng một ứng dụng chát bằng Node.js và kết nối với app Flutter và
trang web sử dụng WebSocket, bạn có thể làm như sau:

Giới thiệu

Bạn muốn dựng một ứng dụng chat và có sử dụng realtime tương tác cùng lúc. Thì bạn hãy sử
dụng socket và làm theo các bước bên dưới.

Bên dưới tôi đã tổng hợp các bước cũng như quy trình làm một App chat đơn giản từ mobile
<- server -> web.

Với mobile tôi sử dụng flutter

Server tôi sử dụng socket

Với Web tôi dùng HTML và JAVASCRIPT

Bắt đầu đi từng phần xây dựng web chat bên dưới

Cài đặt server NodeJS

Cài đặt Node.js trên máy tính của bạn.

Tạo một ứng dụng Node.js bằng cách tạo một thư mục mới và chạy lệnh sau trong terminal:

npm init

Và thêm các thư viện

npm install express
npm install socket.io
npm install nodemon

Tạo một tệp tin index.js và gõ các mã để khởi tạo và cấu hình ứng dụng của bạn

Trong ứng dụng của bạn, sử dụng module socket.io để tạo một WebSocket server và lắng nghe các kết nối
đến từ các client.

const app = require('express')();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

// set up routes and middleware
app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

// listen for incoming connections from clients
io.on('connection', (socket) => {
  console.log('a user connected');
  // handle incoming messages from clients
  socket.on('message', (msg) => {
    console.log('message: ' + msg);
    // broadcast the message to all clients
    io.emit('message', msg);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

Đơn giản quá đúng không nào.

Và chạy nó ta sử dụng nodemon để auto save và cập nhật lại server khi thay đổi code trong
node

Xây dựng web chat hiển thị server

Trong app Flutter sử dụng thư viện socket_io_client để kết nối với WebSocket server của ứng dụng Node.js

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late IO.Socket socket;

  @override
  void initState() {
    super.initState();
    // connect to the WebSocket server
    socket = IO.io('https://mtips5s.com:3000', <String, dynamic>{
      'transports': ['websocket'],
      'autoConnect': false,
    });
    socket.connect();
    // listen for incoming messages from the server
    socket.on('message', (data) {
      print('Received message: $data');
    });
  }

  @override
  void dispose() {
    // disconnect from the WebSocket server
    socket.disconnect();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WebSocket Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('WebSocket connection status:'),
              StreamBuilder(
                stream: socket.onConnect,
                builder: (context, snapshot) {
                  if (snapshot.hasData) {
                    return Text('Connected');
                  } else {
                    return Text('Disconnected');
                  }
                },
              ),
            ],
          ),
        ),
      ),
    );

Cài đặt giao diện Web HTML

Trên trang web, bạn có thể sử dụng JavaScript để kết nối với WebSocket server của ứng dụng Node.js.

Trong trang HTML của bạn, thêm đoạn mã sau để kết nối với WebSocket server:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebSocket Example</title>
  </head>
  <body>
    <input type="text" id="message" placeholder="Type a message">
    <button id="send">Send</button>
    <div id="messages"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();
      // listen for incoming messages from the server
      socket.on('message', (msg) => {
        const messages = document.getElementById('messages');
        const li = document.createElement('li');
        li.appendChild(document.createTextNode(msg));
        messages.appendChild(li);
      });
      // send a message to the server
      const sendButton = document.getElementById('send');
      const messageInput = document.getElementById('message');
      sendButton.addEventListener('click', () => {
        const msg = messageInput.value;
        socket.emit('message', msg);
        messageInput.value = '';
      });
    </script>
  </body>
</html>

Đoạn mã trên sẽ tạo ra một trang web đơn giản với một ô nhập văn bản để gửi tin
nhắn và một danh sách các tin nhắn được nhận từ server. Nó sử dụng thư viện socket.io để kết
nối với WebSocket server và gửi và nhận tin nhắn.

Bạn cũng cần thêm các đoạn mã để kết nối với server và gửi và nhận tin nhắn. Nó sử
dụng API socket.io để tạo một WebSocket client và gửi tin nhắn khi người dùng nhấn nút “Send”.

Giao diện app chat

Đoạn mã trên sẽ tạo ra một kết nối WebSocket tới server, lắng nghe các tin nhắn từ server và
gửi tin nhắn khi người dùng nhấn nút “Send”. Khi server nhận được tin nhắn, nó sẽ gửi lại tin
nhắn cho tất cả các client đang kết nối, bao gồm app Flutter và trang web của bạn. Tin nhắn
sẽ được hiển thị trên trang web và trong ứng dụng Flutter.

Và khi đó trên project xây dựng web chat terminal ta sẽ nhận được

Log app chat

Quản lý PORT socket

Trên phía client, bạn có thể sử dụng địa chỉ IP hoặc tên miền của server Node.js để kết nối
với WebSocket server.

Ví dụ, nếu địa chỉ IP của server Node.js là 192.168.0.100, bạn có thể sử dụng đoạn mã sau để
kết nối với server Node.js trên trang web:

const socket = io('http://my-nodejs-server.com:3000');

Trong đoạn mã trên, chúng ta sử dụng hàm io() của thư viện socket.io-client để tạo một kết nối tới
địa chỉ IP của server Node.js (http://192.168.0.100) trên cổng 3000 (giả sử bạn đã cấu hình server Node.js để lắng
nghe trên cổng này).

Nếu bạn sử dụng tên miền để định danh server Node.js, bạn có thể thay thế địa chỉ IP bằng
tên miền của server Node.js. Ví dụ:

const socket = io('http://192.168.0.100:3000');

Chú ý rằng bạn cần đảm bảo server Node.js đã được cấu hình để lắng nghe kết nối WebSocket trên
địa chỉ IP hoặc tên miền này, và firewall trên máy tính cần cho phép kết nối tới cổng WebSocket.

Dùng với WebSocket – (Hiểu biết thêm)

<script src="https://unpkg.com/ws"></script>

Sau đó, bạn có thể sử dụng mã JavaScript sau để kết nối tới server Node.js:

const socket = new WebSocket('ws://mtips5s.com:3000');

socket.addEventListener('open', (event) => {
  console.log('Connected to WebSocket server');
});

socket.addEventListener('message', (event) => {
  console.log('Received message from server:', event.data);
});

socket.addEventListener('close', (event) => {
  console.log('Disconnected from WebSocket server');
});

Trong đoạn mã trên, chúng ta sử dụng lớp WebSocket của thư viện ws để tạo một kết nối tới
server Node.js trên địa chỉ ws://mtips5s.com:3000. Sau đó, chúng ta đăng ký các trình xử lý sự kiện open, message,
và close để xử lý các sự kiện liên quan tới kết nối WebSocket.

Tuy nhiên, chúng ta cần lưu ý rằng sử dụng các thư viện khác nhau có thể yêu cầu cách
sử dụng khác nhau. Bạn nên tham khảo tài liệu của từng thư viện để biết cách sử dụng chính
xác.

Đóng Socket

Để đóng cổng (port) của kết nối socket, bạn có thể sử dụng phương thức close của đối tượng socket.
Đoạn mã JavaScript sau sẽ đóng kết nối socket:

const server = require('http').createServer();

server.close(() => {
  console.log('Server is now closed');
});

Khi bạn gọi phương thức close này, server sẽ ngừng lắng nghe kết nối mới tới cổng đó và đóng
tất cả các kết nối socket hiện đang mở tới cổng đó. Sau khi tất cả các kết nối socket
được đóng, server sẽ đóng cổng.

Kết luận

Ở phần này chúng ta dựng một websocket đơn giản với phần sau tôi sẽ viết thêm cách tương tác
với database mysql để quản lý socket.

#mtips5s contact

Fanpage: https://www.facebook.com/mtips5s

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtips5s

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Chúc các bạn thành công!

Các lần chỉnh sửa

  • v1.0 07/04/2023: Viết bài

Written by admin

Comments

This post currently has no responses.

Leave a Reply

02:17

Related View More