Написание сервера WebSocket на JavaScript (Deno)

В этом примере показано, как создать сервер WebSocket API с помощью Deno и соответствующей веб-страницы.

Deno — это среда выполнения JavaScript, которая поддерживает транспиляцию TypeScript и кэширование на лету. Deno имеет встроенный форматировщик, линтер, тестовый запуск и многое другое, а также реализует множество веб-API. Благодаря соответствию веб-стандартам, все API, специфичные для Deno, реализованы в пространстве имён Deno.

На сайте Deno приведены инструкции по установке Deno.

Версия Deno на момент написания: 1.36.

Код

Код будет содержаться в двух файлах: один для сервера и один для клиента.

Сервер

Создайте файл main.js. Этот файл будет содержать код простого HTTP-сервера, который также будет обслуживать HTML-клиента.

Deno.serve({
  port: 80,
  handler: async (request) => {
    // If the request is a websocket upgrade,
    // we need to use the Deno.upgradeWebSocket helper
    if (request.headers.get("upgrade") === "websocket") {
      const { socket, response } = Deno.upgradeWebSocket(request);

      socket.onopen = () => {
        console.log("CONNECTED");
      };
      socket.onmessage = (event) => {
        console.log(`RECEIVED: ${event.data}`);
        socket.send("pong");
      };
      socket.onclose = () => console.log("DISCONNECTED");
      socket.onerror = (error) => console.error("ERROR:", error);

      return response;
    } else {
      // If the request is a normal HTTP request,
      // we serve the client HTML file.
      const file = await Deno.open("./index.html", { read: true });
      return new Response(file.readable);
    }
  },
});

Deno.upgradeWebSocket() повышает уровень подключения до подключения WebSocket, что подробно описано в механизме повышения уровня протокола.

Deno.serve() использует Deno.listen() и Deno.serveHttp() под капотом и представляет собой интерфейс более высокого уровня для лёгкой настройки HTTP-сервера. Без него код выглядел бы примерно так.

for await (const conn of Deno.listen({ port: 80 })) {
  for await (const { request, respondWith } of Deno.serveHttp(conn)) {
    respondWith(handler(request));
  }
}

Клиент

Создайте файл index.html. Этот файл будет содержать скрипт, который будет посылать ping на сервер каждые пять секунд после установления соединения.

<!doctype html>
<h2>WebSocket Test</h2>
<p>Sends a ping every five seconds</p>
<div id="output"></div>
<script>
  const wsUri = "ws://127.0.0.1/";
  const output = document.querySelector("#output");
  const websocket = new WebSocket(wsUri);
  let pingInterval;

  function writeToScreen(message) {
    output.insertAdjacentHTML("afterbegin", `<p>${message}</p>`);
  }

  function sendMessage(message) {
    writeToScreen(`SENT: ${message}`);
    websocket.send(message);
  }

  websocket.onopen = (e) => {
    writeToScreen("CONNECTED");
    sendMessage("ping");
    pingInterval = setInterval(() => {
      sendMessage("ping");
    }, 5000);
  };

  websocket.onclose = (e) => {
    writeToScreen("DISCONNECTED");
    clearInterval(pingInterval);
  };

  websocket.onmessage = (e) => {
    writeToScreen(`RECEIVED: ${e.data}`);
  };

  websocket.onerror = (e) => {
    writeToScreen(`ERROR: ${e.data}`);
  };
</script>

Запуск кода

Используя два файла, запустите приложение с помощью Deno.

deno run --allow-net=0.0.0.0:80 --allow-read=./index.html main.js

Deno требует явного указания разрешений на доступ к хост-машине.

--allow-net=0.0.0.0:80 позволяет приложению подключаться к localhost на порту 80
--allow-read=./index.html позволяет получить доступ к HTML-файлу для клиента

См. также

Написание серверов WebSocket

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno