Недавно я пытался узнать о сокетах и решил, почему бы не создать многопользовательскую игру TicTacToe с использованием сокетов.
Живой сайт
Исходный код
примечание: это старое сообщение (30 мая 2022 года) с моего сайта, размещено в архивных целях
Цели
Узнать больше о websockets и о том, как реализовать их в игровом приложении в реальном времени. По сути, websockets — это способ подключения к серверу для связи туда и обратно, это очень полезно для приложений реального времени, особенно в многопользовательских играх. Также они часто используются в веб-сайтах на стороне клиента.
Целью данного проекта является:
- Создать формат для websockets.
- Реализовать сервер.
- Создать игру с использованием 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, думаю, это выглядит красиво, но я не знаю, лучший ли это способ использования библиотеки.