클라이언트 쪽에서 메시지 보내기 및 듣기 

클라이언트에서 새로운 사용자가 참여하거나 컨텐츠가 변경 될 때 client.send를 사용하여 서버에 새로운 정보를 가져 오기 위해 서버에 메시지를 트리거 합니다.

const webSocketsServerPort = 8000;
const webSocketServer = require('websocket').server;
const http = require('http');
// Spinning the http server and the websocket server.
const server = http.createServer();
server.listen(webSocketsServerPort);
const wsServer = new webSocketServer({
  httpServer: server
});

우리가 추적하는 이벤트 : 사용자 참여 및 컨텐츠 변경. 

서버의 메시지를 듣는 것은 매우 간단합니다.

componentWillMount() {
  client.onopen = () => {
   console.log('WebSocket Client Connected');
  };
  client.onmessage = (message) => {
    const dataFromServer = JSON.parse(message.data);
    const stateToChange = {};
    if (dataFromServer.type === "userevent") {
      stateToChange.currentUsers = Object.values(dataFromServer.data.users);
    } else if (dataFromServer.type === "contentchange") {
      stateToChange.text = dataFromServer.data.editorContent || contentDefaultMessage;
    }
    stateToChange.userActivity = dataFromServer.data.userActivity;
    this.setState({
      ...stateToChange
    });
  };
}

서버 측에서 메시지 보내기 및 듣기 

서버에서는 수신 메시지를 잡아 WebSocket에 연결된 모든 클라이언트에게 브로드 캐스트 하면 됩니다. 그리고 이것은 악명 높은 Socket.IO와 WebSocket의 차이점 중 하나입니다. WebSocket을 사용할 때 모든 클라이언트에 메시지를 수동으로 보내야 합니다. Socket.IO는 본격적인 라이브러리이므로 자체적으로 처리합니다.

// I'm maintaining all active connections in this object
const clients = {};

// This code generates unique userid for everyuser.
const getUniqueID = () => {
  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
  return s4() + s4() + '-' + s4();
};

wsServer.on('request', function(request) {
  var userID = getUniqueID();
  console.log((new Date()) + ' Recieved a new connection from origin ' + request.origin + '.');
  // You can rewrite this part of the code to accept only the requests from allowed origin
  const connection = request.accept(null, request.origin);
  clients[userID] = connection;
  console.log('connected: ' + userID + ' in ' + Object.getOwnPropertyNames(clients))
});

연결된 모든 클라이언트에게 메시지를 브로드 캐스트 합니다. 

브라우저가 닫히면 어떻게 됩니까? 

이 경우 WebSocket은 "닫기"이벤트를 호출하여 현재 사용자의 연결을 종료하는 논리를 작성할 수 있습니다. 내 코드에서는 사용자가 문서를 떠날 때 나머지 사용자에게 메시지를 브로드캐스트 했습니다.

connection.on('close', function(connection) {
    console.log((new Date()) + " Peer " + userID + " disconnected.");
    const json = { type: typesDef.USER_EVENT };
    userActivity.push(`${users[userID].username} left the document`);
    json.data = { users, userActivity };
    delete clients[userID];
    delete users[userID];
    sendMessage(JSON.stringify(json));
  });

이 응용 프로그램의 소스 코드는 GitHub의 리포지토리에 있습니다.

결론

WebSocket은 응용 프로그램에서 실시간 기능을 달성하는 가장 흥미롭고 편리한 방법 중 하나입니다. 전이중 통신을 활용할 수 있는 많은 유연성을 제공합니다. Socket.IO 및 기타 사용 가능한 라이브러리를 사용하기 전에 WebSockets를 사용하는 것이 좋습니다.