Protokół WebSocket – przykład serwera Node.js i klienta w JavaScript

Protokół WebSocket wykorzystywany jest do komunikacji między klientem a serwerem. Wykorzystuje on podobnie jak HTTP protokół transportowy TCP, lecz w przeciwieństwie do niego umożliwia przekazywanie do przeglądarki internetowej zmian wprowadzanych na serwerze. Jeśli chcesz sprawdzić nowy protokół WebSocket w praktyce, zachęcam do zapoznania się z poniższym przykładem prostego serwera i klienta.

Kod klienta zbudowany został na podstawie kodu dostępnego na stronie www.websocket.org, natomiast kod serwera zbudowany został w Node.js za pomocą framework’a ws.

Kod klienta

W kodzie klienta przyjęto założenie, że serwer będzie uruchomiony lokalnie na porcie 3000. Po podłączeniu się do serwera klient wysyła wiadomość, następnie odbiera wiadomość od serwera, po czym kończy połączenie. Kod klienta dla uproszczenia zapisano w jednym pliku client.html:

  <!DOCTYPE html>
  <meta charset="utf-8" />
  <title>WebSocket Test</title>
  <script language="javascript" type="text/javascript">

  var wsUri = "ws://localhost:3000";
  var output;

  function init()
  {
    output = document.getElementById("output");
    testWebSocket();
  }

  function testWebSocket()
  {
    websocket = new WebSocket(wsUri);
    websocket.onopen = function(evt) { onOpen(evt) };
    websocket.onclose = function(evt) { onClose(evt) };
    websocket.onmessage = function(evt) { onMessage(evt) };
    websocket.onerror = function(evt) { onError(evt) };
  }

  function onOpen(evt)
  {
    writeToScreen("CONNECTED TO " + wsUri);
    doSend("message from client");
  }

  function onClose(evt)
  {
    writeToScreen("DISCONNECTED");
  }

  function onMessage(evt)
  {
    writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
    websocket.close();
  }

  function onError(evt)
  {
    writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
  }

  function doSend(message)
  {
    writeToScreen("SENT: " + message);
    websocket.send(message);
  }

  function writeToScreen(message)
  {
    var pre = document.createElement("p");
    pre.innerHTML = message;
    output.appendChild(pre);
  }

  window.addEventListener("load", init, false);

  </script>

  <h2>WebSocket Test</h2>

  <div id="output"></div> 

Uruchomienie klienta:

Kod serwera

Kod serwer zbudowany został również w JavaScript, ale dla platformy Node.js i framework’a ws. Serwer dla każdego nowego połączenia wysyła wiadomość tekstową, a także oczekuje na komunikaty wysyłane przez klientów. Kod serwera zapisano w 2 plikach. Główna funkcjonalność serwera WebSocket zapisana został w pliku websocket-server.js:

var WebSocketServer = require('ws')

exports.connect = function(server) {
  var ws = new WebSocketServer.Server({server: server})
  ws.on('connection', function(ws) {
      ws.on('message', function incoming(message) {
        console.log('RECEIVED: %s', message);
      });
      var message = 'messasage from server'
      console.log('SEND: %s', message);
      ws.send(message)
  })
};

W pliku server.js znajduje się jedynie definicja portu, na który serwer jest uruchomiany, a także załadowywanie modułu serwera WebSocket:

var express = require('express')

var app = express()

var server = app.listen(3000, function() {
    console.log('server listen on ', 3000)
})

require('./websocket-server').connect(server)

Z linii komend uruchomienie serwera odbywa się za pomocą polecenia:

seba$ node server.js 
server listen on  3000
SEND: messasage from server
RECEIVED: message from client

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Time limit is exhausted. Please reload CAPTCHA.