Многопользовательская игра TicTacToe с использованием Websockets

Недавно я пытался узнать о сокетах и решил, почему бы не создать многопользовательскую игру TicTacToe с использованием сокетов.

Живой сайт
Исходный код

примечание: это старое сообщение (30 мая 2022 года) с моего сайта, размещено в архивных целях

Цели

Узнать больше о websockets и о том, как реализовать их в игровом приложении в реальном времени. По сути, websockets — это способ подключения к серверу для связи туда и обратно, это очень полезно для приложений реального времени, особенно в многопользовательских играх. Также они часто используются в веб-сайтах на стороне клиента.

Целью данного проекта является:

  1. Создать формат для websockets.
  2. Реализовать сервер.
  3. Создать игру с использованием Vue.

1. Создание формата для сокетов.

Поскольку я новичок в websockets, я пытаюсь понять формат, который будет использоваться для связи с сервером, и, честно говоря, я не нашел много ресурсов, рассказывающих об этом, поэтому я попытаюсь создать свой собственный формат.

{
  "type": <type of message>,
  "data": {
    <any data that is needed>
  }
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Исходя из типа сообщения, данные будут использоваться для определения того, что должен сделать сервер или клиент. Например, если тип сообщения «move», данные будут использоваться для определения того, какой игрок и куда переместился.

{
  "type": "move",
  "data": {
    "user": <user data>,
    "x": <row number>,
    "y": <col number>
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Сообщение выше означает, что пользователь переместился в строку номер x и столбец номер y.

2. Реализуйте сервер.

Для создания сервера я использовал express, а для создания websocket — express-ws, чтобы можно было легко использовать websocket, как и другие конечные точки HTTP-запросов в express. В качестве простого примера, для создания сервера websocket используется следующий код.

const express = require('express');
const app = express();
const ws = require('express-ws')(app);

app.ws('/', (ws, req) => {
  ws.on('message', (msg) => {
    const { type, data } = JSON.parse(msg);
    if (type === 'move') {
      // do something with data
    }
  });
});
Вход в полноэкранный режим Выход из полноэкранного режима

Но для хранения пользователей и комнат на сервере я использовал массив… пока что. Я думаю, что это нормально, потому что я делаю это только в учебных целях. Если мне когда-нибудь понадобится хранить больше данных, я смогу легко расширить этот проект, чтобы использовать базу данных.

3. Создайте игру с помощью Vue.

Эта часть — создание игры TicTacToe, но с использованием Vue. Я попытался использовать новую библиотеку ui под названием Naive UI, думаю, это выглядит красиво, но я не знаю, лучший ли это способ использования библиотеки.

Оцените статью
devanswers.ru
Добавить комментарий