Создать игровую площадку WebSocket

Как новичок, WebSocket был для меня загадкой.

Мне просто нужно настроить его один раз! Тунель!?

Приступая к работе, я нашел много ресурсов, в которых рассказывается о том, ЧТО такое веб-сокеты, КАК они используются и ГДЕ и КОГДА их следует использовать. Но я хотел использовать его, запустить — быстрая и грязная установка. Я хотел проверить различные условия, особенно их поведение, когда браузеры теряют связь. (Если вам интересно, веб-сокеты в Chrome и Firefox ведут себя по-разному при потере соединения. Ничего удивительного!)

Этот блог представляет собой краткое руководство по настройке WebSockets и экспериментам с ними. Но для начала просто краткое введение в WebSockets.

3 W — что, почему и кто

WebSockets используются для открытия интерактивного и постоянного канала между клиентом (браузерами) и сервером. Клиент устанавливает и закрывает соединение по мере необходимости. WebSockets могут быть разработаны для поддержки однонаправленного или двунаправленного потока связи.

Мы можем идентифицировать эти протоколы на многих веб-сайтах. Рассмотрим StackOverflow. Если вы проведете достаточно времени на этом сайте, вы сможете увидеть WebSockets в игре. Новые действия отправляются клиенту через соединение WebSocket.

Чтобы просмотреть запросы WebSocket на любом веб-сайте, вы можете —

Откройте Инструменты разработчика в браузере.
Перейдите на вкладку Сеть.
Отфильтруйте ws запросов.
Выберите запрос ws и проверьте вкладку Сообщения, чтобы узнать о текущих сообщениях.

Как вы уже могли догадаться, WebSockets — это совместное предприятие для клиентов и серверов. По следующим ссылкам приведены подробные настройки и необходимые инструменты.

Или вы можете выбрать из Инструментов WebSockets.

Но если вам просто нужна быстрая настройка и вы, как и я, знакомы только с JavaScript, продолжить чтение.

Игровая площадка WebSocket

На игровой площадке мы достигнем самой простой реализации соединения WebSocket сервер-клиент, как показано на следующем рисунке.

Мы установим соединение WebSocket, передадим несколько сообщений, а затем закроем соединение от клиента.

Настройка проекта

Мы настроим среду разработки NodeJS (это быстро и просто). Если вы новичок и вам нужны дополнительные сведения о настройке проекта NodeJS, проверьте разделы Настройка и запуск простого проекта Node Server и Экспресс-веб-инфраструктура (Node.js/JavaScript). Вы можете игнорировать экспресс-часть, если она не требуется. Мы будем использовать только NodeJS.

Структура нашего проекта будет включать всего два файла — client.js и server.js.

- ws_starter
| - client.js
| - server.js
| - package.json

Мы собираемся использовать библиотеку веб-сокетов NodeJS — ws.

ws — это простая в использовании, невероятно быстрая и тщательно протестированная реализация клиента и сервера WebSocket.

Настройка сервера

Как только клиент запрашивает connection на сервер, сервер может send отправлять сообщения клиенту или прослушивать message, поступающие от клиента.

// server.js
const WebSocket = require("ws");
// Create a web socket connection at port 8080.
// This is where the client will keep listening to.
const wss = new WebSocket.Server({ port: 8080 });
wss.on("connection", (ws) => {
  ws.send("SERVER: Connection established");
function pingClient() {
    ws.send("SERVER: PING");
  }
// Keep pinging the client every 4 seconds.
  const ping = setInterval(pingClient, 4000);
// Listen to the message coming from client.
  ws.on("message", (message) => {
    console.log(`${new Date().toLocaleTimeString()}: ${message}`);
  });
// Clearing up when client closes web socket connection
  ws.on("close", () => {
    clearInterval(ping);
    console.log("Connection closed.");
  });
});

Это все, что требуется, и теперь мы запустим сервер. Откройте терминал для корня вашего проекта и запустите сервер Node.

node server

Сервер WebSocket работает на localhost:8080.

Настройка клиента

Клиент установит connection с сервером WebSocket, а затем отправит начальное сообщение, как только соединение будет открыто. Существует событие onerror для обработки ошибок, таких как сетевая ошибка или отсутствие у клиента любого входящего сообщения с сервера. Через 10 секунд соединение WebSocket закрывается.

// client.js
const WebSocket = require("ws");
const url = "ws://localhost:8080";
const connection = new WebSocket(url);
let introduceStop;
connection.onopen = () => {
  // After connection opens send message to server.
  connection.send("CLIENT: PONG");
// After 10 seconds close web socket connection.
  introduceStop = setTimeout(function () {
    console.log(
      `${new Date().toLocaleTimeString()}: Client closing WebSocket connection`
    );
    connection.close();
  }, 10000);
};
// Catch error while web socket connection is open.
// After `onerror`, `onclose` will be triggered.
connection.onerror = (error) => {
  console.log(`Web socket error: ${error}`);
};
// Keep reading messages from server.
connection.onmessage = (event) => {
  console.log(`${new Date().toLocaleTimeString()} ${event.data}`);
};
// Clear things once web socket connection is closed.
connection.onclose = () => {
  clearTimeout(introduceStop);
  console.log("Web Socket connection properly closed.");
};

Для клиента вы можете либо использовать свой проект, либо запустить следующее в терминале.

node client

Теперь, когда и клиент, и сервер запущены, мы можем перейти к терминалам.

Тестирование игровой площадки WebSocket

У нас запущено два терминала для сервера и клиента соответственно. Если мы откроем их в разделенном окне, мы увидим следующее поведение.

Это все, что нам нужно для детской площадки. У нас есть сервер, который мы можем изменить для отправки любых данных или реализации дополнительных функций. Нам не нужно держать клиента на одном месте. Нам нужно только установить соединение WebSocket и поддерживать работоспособность сервера.

Код для вышеуказанной настройки доступен по адресу darshna09/websocket_mindmapping.