Многопользовательская игра 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, думаю, это выглядит красиво, но я не знаю, лучший ли это способ использования библиотеки.