[socket.io] 사용할 Client API

김혜지·2020년 12월 1일
1

본문

Client API

IO

const io = require('socket.io-client');
// or with import syntax
import { io } from 'socket.io-client';

io([url][, options])

  • url (String) (default: window.location)
  • options (Object)
    - forceNew (Boolean) 기존 connection 재사용 여부
  • Returns Socket

지정된 URL에 대해 새 Manager를 만들고 multiplexfalse로 전달되지 않는 한 후속 호출에 대해 기존 Manager를 재사용하려고 합니다. 이 옵션을 전달하는 것은 force new connection: true 또는 forceNew : true을 전달하는 것과 같습니다.

URL의 경로 이름으로 지정된 네임 스페이스에 대해 새 Socket 인스턴스가 반환되며 기본값은 /입니다. 예를 들어, URL이 http://localhost/users이면 http://localhost에 대한 전송 연결이 설정되고 / users에 대한 Socket.IO 연결이 설정됩니다.

쿼리 옵션을 사용하거나 URL에서 직접 쿼리 매개 변수를 제공 할 수도 있습니다 (example: http://localhost/users?token=abc).

const io = require("socket.io-client");

const socket = io("ws://example.com/my-namespace", {
  reconnectionDelayMax: 10000,
  query: {
    auth: "123"
  }
});

Initialization examples

With multiplexing

기본적으로 리소스를 최소화하기 위해 다른 네임 스페이스에 연결할 때 단일 연결이 사용됩니다.

const socket = io();
const adminSocket = io('/admin');
// a single connection will be established

이 동작은 forceNew 옵션으로 비활성화 할 수 있습니다.

const socket = io();
const adminSocket = io('/admin', { forceNew: true });
// will create two distinct connections

참고 : 동일한 네임 스페이스를 재사용하면 두 개의 연결이 생성됩니다.

const socket = io();
const socket2 = io();
// will also create two distinct connections
With custom path
const socket = io('http://localhost', {
  path: '/myownpath'
});

// server-side
const io = require('socket.io')({
  path: '/myownpath'
});

요청 URL은 다음과 같습니다. localhost/myownpath/?EIO=3&transport=polling&sid=<id>

const socket = io('http://localhost/admin', {
  path: '/mypath'
});

여기서 소켓은 사용자 정의 경로 mypath를 사용하여 admin 네임 스페이스에 연결됩니다.

요청 URL은 다음과 같습니다. localhost/mypath/?EIO=3&transport=polling&sid=<id> (네임 스페이스는 페이로드의 일부로 전송됨).

With query parameters
const socket = io('http://localhost?token=abc');

// server-side
const io = require('socket.io')();

// middleware
io.use((socket, next) => {
  let token = socket.handshake.query.token;
  if (isValid(token)) {
    return next();
  }
  return next(new Error('authentication error'));
});

// then
io.on('connection', (socket) => {
  let token = socket.handshake.query.token;
  // ...
});
With query option
const socket = io({
  query: {
    token: 'cde'
  }
});

재 연결시 쿼리 내용을 업데이트 할 수도 있습니다.

socket.on('reconnect_attempt', () => {
  socket.io.opts.query = {
    token: 'fgh'
  }
});

Socket

Socket은 서버와 상호 작용하기위한 기본 클래스입니다. Socket은 특정 NameSpace (default: /)에 속하며 기본 Manager를 사용하여 통신합니다.

Socket은 기본적으로 네트워크를 통해 서버로 이벤트를 보내고 서버에서 이벤트를 수신하는 EventEmitter입니다.

socket.emit('hello', { a: 'b', c: [] });

socket.on('hey', (...args) => {
  // ...
});

socket.id

  • (String)

소켓 세션의 고유 식별자입니다. connect 이벤트가 트리거 된 후 설정되고 reconnect 이벤트 후에 업데이트됩니다.

socket.connected

  • (Boolean)

소켓이 서버에 연결되었는지 여부.

socket.disconnected

  • (Boolean)

소켓이 서버와의 연결이 끊어졌는지 여부.

const socket = io('http://localhost');

console.log(socket.id); // undefined

socket.on('connect', () => {
  console.log(socket.id); // 'G5p5...'
  console.log(socket.connected); // true
  console.log(socket.disconnected); // false

});

socket.open()

  • Returns Socket

소켓을 수동으로 엽니다.

const socket = io({
  autoConnect: false
});

// ...
socket.open();

수동으로 다시 연결하는 데 사용할 수도 있습니다.

socket.on('disconnect', () => {
  socket.open();
});

socket.connect()

socket.open ()의 동의어입니다.

socket.send([…args][, ack])

  • args
  • ack (Function)
  • Returns Socket

message 이벤트를 보냅니다. socket.emit을 참조하십시오.

socket.emit(eventName[, …args][, ack])

  • eventName (String)
  • args
  • ack (Function)
  • Returns Socket

문자열 이름으로 식별되는 소켓에 이벤트를 내보냅니다. 다른 매개 변수를 포함 할 수 있습니다. Buffer를 포함하여 모든 직렬화 가능한 데이터 구조가 지원됩니다.

ack argument는 선택 사항이며 서버 응답과 함께 호출됩니다.

socket.emit('ferret', 'tobi', (data) => {
  console.log(data); // data will be 'woot'
});

// server:
//  io.on('connection', (socket) => {
//    socket.on('ferret', (name, fn) => {
//      fn('woot');
//    });
//  });

socket.on(eventName, callback)

  • eventName (String)
  • callback (Function)
  • Returns Socket

주어진 이벤트에 대한 새 핸들러를 등록하십시오.

socket.on('news', (data) => {
  console.log(data);
});

// with multiple arguments
socket.on('news', (arg1, arg2, arg3, arg4) => {
  // ...
});
// with callback
socket.on('news', (cb) => {
  cb(0);
});

소켓은 실제로 hasListeners ,once 또는 off와 같은 Emitter 클래스의 모든 메서드를 (이벤트 리스너를 제거하기 위해) 상속합니다.

socket.close()

  • Returns Socket
    소켓을 수동으로 분리합니다.

socket.disconnect()

socket.close()의 동의어입니다.

profile
Developer ( Migrating from https://hyex.github.io/ )

0개의 댓글