웹소켓、socket.io-client

2024-07-12

웹소켓

WebSocket은 단일 장기 영구 TCP 연결을 통해 전이중 통신용 채널을 제공하는 네트워크 통신 프로토콜입니다.

WebSocket은 클라이언트와 서버 간의 양방향 데이터 교환을 허용합니다. 이는 서버가 클라이언트의 요청을 기다릴 필요 없이 클라이언트에 적극적으로 데이터를 푸시할 수 있음을 의미합니다. WebSocket 연결이 설정된 후에는 클라이언트와 서버 모두 언제든지 데이터를 보낼 수 있으므로 실시간 및 상호 작용이 크게 향상됩니다.

소켓.io-클라이언트

프론트엔드 이용시 바로 패스 가능new WebSocket사용하려면 네이티브를 사용하세요.WebSocket 제공되는 기능은 비교적 간단하며 일부 문제는 직접 처리해야 합니다.이는 다음을 사용하여 사용할 수 있습니다.socket.io-client작동하다

socket.io-client 기본 WebSocket API와 비교할 때 더 풍부한 기능과 더 넓은 호환성을 제공하므로 많은 경우에 더 나은 선택이 됩니다.다음은socket.io-client 주요 장점 중 일부:

호환성:
socket.io-client 롱 폴링, 플래시 소켓 등과 같이 WebSocket을 지원하지 않는 브라우저에서 자동으로 다른 전송 방법으로 대체하여 거의 모든 최신 브라우저와 일부 이전 브라우저에서 작동하도록 합니다.
자동으로 다시 연결:
네트워크 연결이 중단되거나 서버가 다시 시작되는 경우socket.io-client 재연결은 자동으로 시도될 수 있지만 기본 WebSocket에서는 재연결 논리를 수동으로 처리해야 합니다.
오류 처리:
socket.io-client 네트워크 오류를 더 효과적으로 보고하고 처리할 수 있도록 보다 완벽한 오류 처리 메커니즘을 제공합니다.

기본 사용법

socket.io-client 클라이언트(일반적으로 브라우저 또는 Node.js 애플리케이션)에서 Socket.IO 서버와 통신하기 위한 라이브러리입니다. 자동 재연결, 하트비트 감지, 오류 처리 및 기타 기능을 포함하여 실시간 양방향 통신을 처리할 수 있는 강력한 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

소켓 인스턴스 생성

소켓 인스턴스를 생성하려면 일반적으로 서버의 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.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

기술나눔