Bagaimana cara menggunakan Websocket dengan Express API sederhana?

Deskripsi singkat tentang teknologi

Websocket adalah protokol komunikasi melalui koneksi TCP, yang dirancang untuk bertukar pesan antara browser dan server web secara real time.



Klien dan server menggunakan protokol yang mirip dengan HTTP untuk membuat koneksi WebSocket. Klien membuat permintaan HTTP khusus yang ditanggapi oleh server dengan cara tertentu.



Catatan



Meskipun permintaan dan tanggapan baru "mirip" dengan permintaan dan tanggapan HTTP, mereka tidak. Misalnya, permintaan memiliki badan, tetapi header tidak memiliki bidang Panjang Konten (yang melanggar konvensi HTTP). Anda dapat membaca lebih lanjut tentang ini di Wikipedia .



Salah satu keunggulan utama teknologi ini adalah kesederhanaannya. Hanya ada 4 peristiwa di klien dan server untuk diproses:

1. koneksi
2. kesalahan
3. pesan
4. Menutup

Mengapa Websocket?

Selain ws, ada dua metode lain untuk transmisi data berkelanjutan: Server-Sent Events (SSE) dan Long Polling.



Mari kita bandingkan mekanisme komunikasi berkelanjutan antara server dan klien, dan juga menarik kesimpulan mengapa layak (atau tidak) menggunakan websocket.





Salah satu keunggulan utama teknologi ws adalah kecepatan transfer data. SSE dan LP menggunakan protokol HTTP (S) dan bekerja seperti ini:

1. Membuat permintaan perubahan;
2. Jika perubahan muncul di server, server mengirimkannya;
3. , .

:

1. .
2. , HTTP(S).
3. , .

api.

const http = require("http");
const express = require( "express");
const WebSocket = require( "ws");

const app = express();

const server = http.createServer(app);

const webSocketServer = new WebSocket.Server({ server });

webSocketServer.on('connection', ws => {
   ws.on('message', m => {
webSocketServer.clients.forEach(client => client.send(m));
   });

   ws.on("error", e => ws.send(e));

   ws.send('Hi there, I am a WebSocket server');
});

server.listen(8999, () => console.log("Server started"))

Apa yang terjadi di sini?



Untuk membuat server yang mendukung ws, kami membuat server http biasa, dan kemudian mengikat server ke sana saat membuat websocket.



Fungsi "on" membantu mengelola acara websocket. Peristiwa yang paling menonjol adalah peristiwa pesan, jadi mari kita lihat lebih dekat.



Di sini fungsi menerima parameter m - pesan, yaitu apa yang dikirim pengguna. Dengan demikian, kita dapat mengirim string dari klien dan memprosesnya di server. Dalam hal ini, server hanya meneruskan pesan ini ke semua orang yang terhubung ke server websocket. Array klien dari objek webSocketServer berisi semua koneksi ke server. Objek ws hanya menyimpan satu koneksi pada satu waktu.



Komentar



Anda tidak boleh menggunakan pendekatan ini dalam aplikasi nyata. Jika api dijelaskan dengan cara ini, server tidak dapat membedakan satu permintaan dari yang lain. Bagaimana Anda bisa membangun api berbasis websocket akan ditulis nanti.



Interaksi dengan server di klien akan terlihat seperti ini:

export const wsConnection = new WebSocket("ws://localhost:8999");
wsConnection.onopen = function() {
    alert(" .");
};

wsConnection.onclose = function(event) {
    if (event.wasClean) {
        alert('  ');
    } else {
        alert(' '); // , ""  
    }
    alert(': ' + event.code + ' : ' + event.reason);
};

wsConnection.onerror = function(error) {
    alert(" " + error.message);
};

export const wsSend = function(data) {
// readyState - true,   
    if(!wsConnection.readyState){
        setTimeout(function (){
            wsSend(data);
        },100);
    } else {
        wsConnection.send(data);
    }
};

API berbasis Websocket

Tidak seperti REST API, di mana permintaan didistribusikan ke berbagai url, Websocket API hanya memiliki satu url. Untuk membangun API lengkap berdasarkan websockets, Anda perlu mengajari sistem untuk membedakan satu permintaan dari yang lain. Ini dapat diimplementasikan sebagai berikut:



1) Dari klien, kami akan mengirimkan permintaan dalam bentuk string json, yang akan kami parse di server:

const sendMessage = (message) => conn.send(JSON.stringify({ event: "chat-message", payload: { userName, message }}));

2) Di server, kami mengurai string dan memilih bidang acara - jenis permintaan. Mari tuliskan jawaban yang sesuai untuk setiap jenis:

const dispatchEvent = (message, ws) => {
   const json = JSON.parse(message);
   switch (json.event) {
       case "chat-message": webSocketServer.clients.forEach(client => client.send(message));
       default: ws.send((new Error("Wrong query")).message);
   }
}

Dengan demikian, kami dapat mengirim permintaan yang berbeda ke server dan memproses respons tergantung pada permintaan tersebut.

Kesimpulan

Jika Anda diberi tugas membuat API dan ternyata pelanggan tidak tertarik untuk mendukung browser lama, maka API berbasis WebSocket adalah pilihan yang tepat. Untuk kenyamanan Anda, kami telah menyiapkan kode untuk bagian klien dan server di tautan .