Κοινή χρήση τεχνολογίας

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

WebSocket

Το WebSocket είναι ένα πρωτόκολλο επικοινωνίας δικτύου που παρέχει ένα κανάλι για πλήρη αμφίδρομη επικοινωνία μέσω μιας και μόνο μακροχρόνιας μόνιμης σύνδεσης TCP.

Το WebSocket επιτρέπει αμφίδρομη ανταλλαγή δεδομένων μεταξύ του πελάτη και του διακομιστή, πράγμα που σημαίνει ότι ο διακομιστής μπορεί να προωθήσει ενεργά δεδομένα στον πελάτη χωρίς να χρειάζεται να περιμένει το αίτημα του πελάτη. Αφού δημιουργηθεί η σύνδεση WebSocket, τόσο ο πελάτης όσο και ο διακομιστής μπορούν να στείλουν δεδομένα ανά πάσα στιγμή, γεγονός που βελτιώνει σημαντικά τον πραγματικό χρόνο και τη διαδραστικότητα.

socket.io-client

Όταν χρησιμοποιείτε το μπροστινό μέρος, μπορείτε να περάσετε απευθείαςnew WebSocketγια χρήση, αλλά χρήση εγγενώνWebSocket Οι λειτουργίες που παρέχονται είναι σχετικά απλές και πρέπει να αντιμετωπίσετε ορισμένα προβλήματα μόνοι σας.Αυτό είναι διαθέσιμο χρησιμοποιώνταςsocket.io-clientνα λειτουργήσει

socket.io-client Σε σύγκριση με το εγγενές WebSocket API, παρέχει πλουσιότερες δυνατότητες και ευρύτερη συμβατότητα, γεγονός που το καθιστά καλύτερη επιλογή σε πολλές περιπτώσεις.Το παρακάτω είναιsocket.io-client Μερικά από τα κύρια πλεονεκτήματα:

1. συμβατότητα:
   socket.io-client Επιστρέφετε αυτόματα σε άλλες μεθόδους μετάδοσης σε προγράμματα περιήγησης που δεν υποστηρίζουν το WebSocket, όπως το long-polling, τα Flash Sockets κ.λπ., διασφαλίζοντας ότι λειτουργούν σχεδόν σε όλα τα σύγχρονα προγράμματα περιήγησης και σε ορισμένα παλαιότερα προγράμματα περιήγησης.

2. Αυτόματη επανασύνδεση:
   Όταν διακόπτεται η σύνδεση δικτύου ή γίνεται επανεκκίνηση του διακομιστή,socket.io-client Η επανασύνδεση μπορεί να επιχειρηθεί αυτόματα, ενώ το εγγενές WebSocket απαιτεί χειροκίνητο χειρισμό της λογικής επανασύνδεσης.

3. Διαχείριση σφαλμάτων:
   socket.io-client Παρέχει έναν πιο ολοκληρωμένο μηχανισμό χειρισμού σφαλμάτων για την καλύτερη αναφορά και χειρισμό σφαλμάτων δικτύου.

Βασική χρήση

socket.io-client Είναι μια βιβλιοθήκη για την επικοινωνία με έναν διακομιστή Socket.IO στον πελάτη (συνήθως ένα πρόγραμμα περιήγησης ή μια εφαρμογή Node.js). Παρέχει ένα ισχυρό API που μπορεί να χειριστεί αμφίδρομη επικοινωνία σε πραγματικό χρόνο, συμπεριλαμβανομένης της αυτόματης επανασύνδεσης, της ανίχνευσης καρδιακών παλμών, του χειρισμού σφαλμάτων και άλλων λειτουργιών.

Εγκαθιστώ

Πρώτα, πρέπει να εγκαταστήσετε socket.io-client . Εκτελέστε την ακόλουθη εντολή στον κατάλογο του έργου σας:

npm install socket.io-client
1

Μονάδα εισαγωγής

Στο αρχείο JavaScript, μπορείτε να χρησιμοποιήσετε τη μέθοδο εισαγωγής μονάδας ES6 για εισαγωγή socket.io-client：

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

Ή, εάν χρησιμοποιείτε λειτουργικές μονάδες CommonJS, μπορείτε να το κάνετε αυτό:

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

Δημιουργία παρουσίας Socket

Η δημιουργία ενός στιγμιότυπου Socket συνήθως απαιτεί μετάβαση στη διεύθυνση URL του διακομιστή. Αυτό μπορεί να είναι μια σχετική διαδρομή (για το ίδιο όνομα τομέα) ή μια πλήρης διεύθυνση URL (για συνδέσεις μεταξύ τομέων). Για παράδειγμα:

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

Ακούστε εκδηλώσεις

Μόλις δημιουργήσετε μια παρουσία Socket, μπορείτε να ακούσετε διάφορα συμβάντα, όπως αλλαγές κατάστασης σύνδεσης, λήψη μηνυμάτων κ.λπ.

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

αποστολή δεδομένων

μπορείς να χρησιμοποιήσεις emit Οι μέθοδοι στέλνουν συμβάντα και δεδομένα στον διακομιστή.

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

Αποσυνδέω

Μια σύνδεση Socket μπορεί να κλείσει ρητά όταν η σύνδεση δεν χρειάζεται πλέον:

socket.disconnect();
1

Ολοκληρωμένο παράδειγμα

Ακολουθεί ένα πλήρες παράδειγμα που δείχνει πώς να το χρησιμοποιήσετε στην πλευρά του πελάτη 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