Teknologian jakaminen

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

WebSocket

WebSocket on verkkoviestintäprotokolla, joka tarjoaa kanavan kaksisuuntaiseen viestintään yhden pitkäaikaisen jatkuvan TCP-yhteyden kautta.

WebSocket mahdollistaa kaksisuuntaisen tiedonsiirron asiakkaan ja palvelimen välillä, mikä tarkoittaa, että palvelin voi aktiivisesti työntää dataa asiakkaalle ilman, että hänen tarvitsee odottaa asiakkaan pyyntöä. Kun WebSocket-yhteys on muodostettu, sekä asiakas että palvelin voivat lähettää tietoja milloin tahansa, mikä parantaa huomattavasti reaaliaikaisuutta ja interaktiivisuutta.

socket.io-client

Etupäätä käytettäessä voit ohittaa suoraannew WebSocketkäyttää, mutta käytä alkuperäistäWebSocket Tarjotut toiminnot ovat suhteellisen yksinkertaisia, ja sinun on ratkaistava joitakin ongelmia itse.Tämä on saatavilla käyttämälläsocket.io-clientoperoida

socket.io-client Verrattuna alkuperäiseen WebSocket API:hen, se tarjoaa rikkaampia ominaisuuksia ja laajemman yhteensopivuuden, mikä tekee siitä paremman valinnan monissa tapauksissa.Seuraava onsocket.io-client Jotkut tärkeimmistä eduista:

1. yhteensopivuus:
   socket.io-client Palaa automaattisesti muihin lähetysmenetelmiin selaimissa, jotka eivät tue WebSocketia, kuten pitkää kyselyä, Flash Socketseja jne., varmistaen, että ne toimivat lähes kaikissa nykyaikaisissa selaimissa ja joissakin vanhemmissa selaimissa.

2. Muodosta yhteys automaattisesti:
   Kun verkkoyhteys katkeaa tai palvelin käynnistyy uudelleen,socket.io-client Uudelleenkytkentää voidaan yrittää automaattisesti, kun taas natiivi WebSocket vaatii uudelleenkytkentälogiikan manuaalista käsittelyä.

3. Virheiden käsittely:
   socket.io-client Tarjoaa täydellisemmän virheenkäsittelymekanismin verkkovirheiden raportoimiseksi ja käsittelemiseksi paremmin.

Peruskäyttö

socket.io-client On kirjasto, joka on tarkoitettu yhteydenpitoon asiakkaan Socket.IO-palvelimen kanssa (yleensä selain tai Node.js-sovellus). Se tarjoaa tehokkaan API:n, joka pystyy käsittelemään reaaliaikaista kaksisuuntaista viestintää, mukaan lukien automaattinen uudelleenkytkentä, syketunnistin, virheiden käsittely ja muut toiminnot.

Asentaa

Ensin sinun on asennettava socket.io-client . Suorita seuraava komento projektihakemistossasi:

npm install socket.io-client
1

Tuo moduuli

JavaScript-tiedostossasi voit käyttää ES6-moduulin tuontimenetelmää esittelyyn socket.io-client：

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

Tai jos käytät CommonJS-moduuleja, voit tehdä tämän:

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

Luo Socket-instanssi

Socket-ilmentymän luominen edellyttää yleensä palvelimen URL-osoitteen välittämistä. Tämä voi olla suhteellinen polku (samalle verkkotunnukselle) tai täydellinen URL-osoite (verkkotunnusten välisille yhteyksille). Esimerkiksi:

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

Kuuntele tapahtumia

Kun olet luonut Socket-esiintymän, voit kuunnella erilaisia ​​tapahtumia, kuten yhteyden tilan muutoksia, vastaanottaa viestejä jne.

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

lähettää tietoja

voit käyttää emit Menetelmät lähettävät tapahtumia ja tietoja palvelimelle.

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

Katkaista

Socket-yhteys voidaan sulkea erikseen, kun yhteyttä ei enää tarvita:

socket.disconnect();
1

Täydellinen esimerkki

Tässä on täydellinen esimerkki siitä, kuinka sitä käytetään asiakaspuolella 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