Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Soket Web

WebSocket adalah protokol komunikasi jaringan yang menyediakan saluran untuk komunikasi dupleks penuh melalui satu koneksi TCP persisten jangka panjang.

WebSocket memungkinkan pertukaran data dua arah antara klien dan server, yang berarti server dapat secara aktif mendorong data ke klien tanpa harus menunggu permintaan klien. Setelah koneksi WebSocket dibuat, klien dan server dapat mengirim data kapan saja, yang sangat meningkatkan waktu nyata dan interaktivitas.

socket.io-klien

Bila menggunakan front end, Anda bisa langsung mengopernyanew WebSocketuntuk digunakan, tetapi gunakan yang asliWebSocket Fungsi yang disediakan relatif sederhana, dan Anda perlu mengatasi sendiri beberapa masalahnya.Ini tersedia menggunakansocket.io-clientmengoperasikan

socket.io-client Dibandingkan dengan API WebSocket asli, API ini menyediakan fitur yang lebih kaya dan kompatibilitas yang lebih luas, sehingga menjadikannya pilihan yang lebih baik dalam banyak kasus.Berikut ini adalahsocket.io-client Beberapa keuntungan utama:

1. kesesuaian:
   socket.io-client Secara otomatis kembali ke metode transmisi lain di browser yang tidak mendukung WebSocket, seperti polling panjang, Flash Sockets, dll., memastikan bahwa metode tersebut berfungsi di hampir semua browser modern dan beberapa browser lama.

2. Sambungkan kembali secara otomatis:
   Ketika koneksi jaringan terputus atau server dimulai ulang,socket.io-client Sambungan ulang dapat dilakukan secara otomatis, sedangkan WebSocket asli memerlukan penanganan logika sambungan ulang secara manual.

3. Penanganan kesalahan:
   socket.io-client Menyediakan mekanisme penanganan kesalahan yang lebih lengkap untuk melaporkan dan menangani kesalahan jaringan dengan lebih baik.

Penggunaan dasar

socket.io-client Merupakan perpustakaan untuk berkomunikasi dengan server Socket.IO di klien (biasanya browser atau aplikasi Node.js). Ini menyediakan API kuat yang dapat menangani komunikasi dua arah secara real-time, termasuk koneksi ulang otomatis, deteksi detak jantung, penanganan kesalahan, dan fungsi lainnya.

Install

Pertama, Anda perlu menginstal socket.io-client . Jalankan perintah berikut di direktori proyek Anda:

npm install socket.io-client
1

Impor modul

Dalam file JavaScript Anda, Anda dapat menggunakan metode impor modul ES6 untuk memperkenalkan socket.io-client：

import { io } from 'socket.io-client';
1

Atau, jika Anda menggunakan modul CommonJS, Anda dapat melakukan ini:

const io = require('socket.io-client');
1

Buat contoh Socket

Membuat instance Socket biasanya memerlukan penerusan URL server. Ini bisa berupa jalur relatif (untuk nama domain yang sama) atau URL lengkap (untuk koneksi lintas domain). Misalnya:

const socket = io('http://localhost:3000');
const socket = io('https://yourdomain.com');
const socket = io("wss://server-domain.com");
1
2
3

Dengarkan acara

Setelah Anda membuat instance Socket, Anda dapat mendengarkan berbagai peristiwa, seperti perubahan status koneksi, penerimaan pesan, dll.

socket.on('connect', () => {
  console.log('Connected to server');
});

socket.on('disconnect', (reason) => {
  console.log('Disconnected from server', reason);
});

socket.on('message', (data) => {
  console.log('Received message from server', data);
});
1
2
3
4
5
6
7
8
9
10
11

mengirim data

Anda dapat gunakan emit Metode mengirim peristiwa dan data ke server.

socket.emit('chat message', { message: 'Hello from the client!' });
1

Memutuskan

Koneksi Socket dapat ditutup secara eksplisit ketika koneksi tidak lagi diperlukan:

socket.disconnect();
1

Contoh lengkap

Berikut adalah contoh lengkap yang menunjukkan cara menggunakannya di sisi klien socket.io-client：

import { io } from 'socket.io-client';

// 创建 Socket 实例
const socket = io('http://localhost:3000');

// 监听连接事件
socket.on('connect', () => {
  console.log('Connected to server');
});

// 监听接收消息事件
socket.on('message', (data) => {
  console.log('Received message from server', data);
});

// 发送消息到服务器
socket.emit('chat message', { message: 'Hello from the client!' });

// 当组件销毁时，关闭 Socket 连接
// 如果你是在 Vue 或 React 的生命周期钩子中使用，确保在这里调用 disconnect
// 或者使用适当的事件来触发断开连接
// socket.disconnect();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22