websocket+sockjs+stompjs penjelasan rinci dan kode contoh

Baru-baru ini, ada persyaratan proyek untuk menggunakan websocket. Saya pikir itu sangat sederhana pada awalnya, tetapi ketika saya menemui masalah dan mempelajarinya lebih lanjut, saya menyadari bahwa websocket tidak sesederhana yang dibayangkan pada klien.

Semua orang sangat familiar dengan protokol transfer hypertext http. http memiliki 1.0, 1.1, Beberapa versi 2.0, mulai dari http1.1, telah mengaktifkan Keep-Alive secara default untuk menjaga kelangsungan koneksi. Sederhananya, ketika halaman web dibuka, koneksi TCP antara klien dan server yang digunakan untuk mengirimkan data http adalah tidak lagi tersedia. akan ditutup jika klien mengakses halaman web di server ini lagi , akan terus menggunakan koneksi yang sudah ada ini, sehingga mengurangi konsumsi sumber daya dan mengoptimalkan kinerja, tetapi Keep-Alive juga memiliki batas waktu, dan ada juga klien yang hanya dapat secara aktif memulai permintaan untuk mendapatkan data yang dikembalikan, dan tidak dapat secara aktif menerimanya. Untuk data yang didorong di latar belakang, websocket muncul.

Websocket adalah salah satu fitur baru HTML5. Tujuannya adalah untuk membangun metode komunikasi dupleks penuh antara browser dan server, mengatasi konsumsi sumber daya yang berlebihan yang disebabkan oleh respons permintaan http, dan menyediakan metode implementasi baru untuk aplikasi skenario khusus. , seperti Obrolan, perdagangan saham, permainan, dan industri lainnya dengan persyaratan waktu nyata yang tinggi.

Baik http maupun websocket didasarkan pada TCP (Transmission Control Protocol). Websocket dapat dianggap sebagai pelengkap protokol http.

SockJS adalah perpustakaan JavaScript. Untuk mengatasi masalah karena banyak browser tidak mendukung protokol WebSocket, SockJs alternatif dirancang. SockJS adalah emulasi teknologi WebSocket. SockJS akan sebisa mungkin sesuai dengan WebSocket API, tetapi jika teknologi WebSocket tidak tersedia, maka secara otomatis akan masuk ke metode polling.

STOMP-Protokol Pesan Berorientasi Teks Sederhana-Protokol Pesan Berorientasi Teks Sederhana.

SockJS menyediakan alternatif untuk WebSocket. Namun apa pun skenarionya, bentuk komunikasi ini terlalu rendah untuk diterapkan secara praktis. Protokol STOMP untuk menambahkan semantik pesan yang sesuai ke komunikasi antara browser dan server.

Singkatnya, WebSocket adalah protokol yang mendasarinya, SockJS adalah alternatif dari WebSocket dan protokol yang mendasarinya, dan STOMP adalah protokol lapisan atas berdasarkan WebSocket (SockJS).

1. Protokol HTTP menyelesaikan detail browser web yang memulai permintaan dan server web merespons permintaan tersebut. Dengan asumsi bahwa protokol HTTP tidak ada, hanya soket TCP yang dapat digunakan untuk menulis aplikasi web.

2. Menggunakan WebSocket (SockJS) secara langsung sangat mirip dengan menggunakan soket TCP untuk menulis aplikasi web, karena tidak ada protokol tingkat tinggi, kita perlu mendefinisikan semantik pesan yang dikirim antar aplikasi, dan kita juga perlu memastikan bahwa kedua ujungnya. dari koneksi dapat mengikuti semantik ini;

3. Sama seperti HTTP menambahkan lapisan model permintaan-respons pada soket TCP, STOMP menyediakan lapisan format garis berbasis bingkai di atas WebSocket untuk menentukan semantik pesan;

Instal sockjs-client dan stompjs; harap perhatikan di sini. Saya menemukan di stompjs: versi ^2.3.3 yang ketika memperkenalkan stompjs, modul net tidak dapat ditemukan akan dilaporkan. Ini adalah masalah yang aneh.

Modul impor:

 impor SockJS dari 'sockjs-client';impor Stomp dari 'stompjs';//Fungsi koneksi biarkan nomor = 1;fungsi sambungkan kembali(socketUrl) { biarkan url = `${BASE_URL}/ws/sdfpoint` //Alamat koneksi/ / Membuat objek koneksi (koneksi belum dimulai) let socket = new SockJS(url); // Dapatkan objek klien dari sub-protokol STOMP let stompClient = Stomp.over(socket); // Memulai koneksi websocket ke server dan mengirim frame CONNECT stompClient.connect( {}, // Anda dapat menambahkan informasi autentikasi klien fungsi connectCallback() {// Fungsi panggilan balik agar berhasil koneksi // Saluran berlangganan stompClient.subscribe('/topic/display/control', function(data){ if (data) { console.log('subscribe data',data); } }) }, function errorCallBack(error){ //Panggil kembali nomor fungsi ketika koneksi gagal += 1; if(number<=10){ reconnect(url);

Ringkasan: Implementasi websocket di sisi klien terlihat relatif sederhana, namun memerlukan kerjasama yang baik dan debugging dengan latar belakang untuk mencapai hasil terbaik. Kompatibilitas browser dicapai melalui SockJS dan Stomp, semantik pesan ditingkatkan, dan kegunaan ditingkatkan. Untuk memahami websocket secara menyeluruh, kita juga perlu memiliki pemahaman mendalam tentang beberapa prinsip dasar dan pengetahuan terkait.

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.