Прошу совета - клиент-серверная онлайн-игра через web с браузерным клиентом на JavaScript

@SilverSurfer · Регистрация: 13.01.2017

Студворк — интернет-сервис помощи студентам

Добрый день
Суть моего обращения, такова:
Разрабатываю компьютерную игру (пошаговую, передаваемые данные незначительны по объёму). Клиент, пишу на JavaScript HTML5 Canvas - с этим проблем не возникло, уже написал здоровый кусок этого клиента
Теперь, надо продумать серверную архитектуру - на каком языке писать сервер игры, как задружить его с клиентами
Стал рыть инет - сколько ни рыл, пока одни непонятки
Суть в том, что (как понимаю) JavaScript не дружит с TCP-сокетами
Дружит с веб-сокетами, но чтобы их реализовать на сервере, требуется какая-то просто диссертация как почитаешь
Может быть, AJAX? Но как именно?
Про node.js, читал. Тоже непонятки, как что, вроде не рекомендуют юзать
Прошу добрых людей, направить меня носом моим в нужное русло. Чтобы избрать нормальную архитектуру сразу, и по сто раз не переделывать.
Заранее спасибо за помощь.

@Egor.S · 13.01.2017, 16:32

я бы порекомендовал node + websocket

@SilverSurfer · 13.01.2017, 16:34 **[ТС]**

Вот я тоже сейчас, склоняюсь к этому - а есть какие-нибудь простые тестовые примеры, серверного кода для вебсокетов?
(с клиентом всё понятно, там методы в JavaScriptе достаточно простые)

@kalabuni · 13.01.2017, 16:42

Сообщение от SilverSurfer

Может быть, AJAX? Но как именно?

главное, что вам необходимо понять: AJAX -- это технология связи между страницей в браузере и конкретным файлом на сервере, при этом связь двусторонняя, но инициатором связи всегда является именно страница -- она первая "звонит" серверному файлу, передавая (или не передавая) ему какие-то свои данные, а тот "отвечает" странице на её запрос, возвращая ей уже свои какие-то данные

@SilverSurfer · 13.01.2017, 17:27 **[ТС]**

А, ну так мне никакие "веб-страницы", в принципе не нужны
То что клиент игры сам на веб-странице - ну с тем же успехом он мог бы быть и как прога на компе (на канвасе, делаю его изначально лишь для простоты запуска с разных устройств этой игры, не требует установки и т.п.). Более того, на сервере игры веб-страница с этим канвасом, храниться точно не будет.
Надо чтобы запустился клиент, и связался с сервером игры. Сервер игры - это прога на компьютере-сервере. Пока это будет мой домашний комп, на который туннель (на определённый порт) проброшен с помощью ngrok. Теперь, надо как-то организовать сокеты - в сервере, и в клиенте. А вот как именно? (чтобы в клиенте на JavaScript, с работой с ними было всё хорошо и просто - и желательно чтобы в проге-сервере игры, тоже). Тому, собсно, и посвящён мой вопрос

Добавлено через 38 минут
Судя по перемещению сабжа, нормальная архитектура это именно node.js )
Просветите пожалуйста меня по ней
Вот ещё думаю, а мож клиент игры тогда, лучше не на JavaScript, а на чём-то другом? Что может Canvas отрисовывать. Или не Canvas, тоже сделать? Как лучше?

vic5710 · 13.01.2017, 18:04

http://socket.io/demos/chat/
основы тут есть

@SilverSurfer · 13.01.2017, 21:49 **[ТС]**

Читал
Вот пишут, лучше использовать не socket.io, а штатные вебсокеты (которые сейчас поддерживаются всеми современными браузерами)
Можно ли сыль на самый простой туториал (самый простой пример) по штатным вебсокетам (а не sockets.io)?

vic5710 · 13.01.2017, 21:55

ну этого в гугле полно - socket.io/sockjs/websockets(ws)
мнений много и меняется все быстро. socket.io больше всего в тренде, Кантор рекомендует sockjs (javascript.ru), там же и по ws есть инфо - https://learn.javascript.ru/websockets

@SilverSurfer · 13.01.2017, 22:11 **[ТС]**

Да полно-то полно, только вот именно поэтому конечного понимания я пока не достиг, читая всё это чего полно. Одни пишут "надо socket.io". Другие на это пишут: "в какой глуши вы живёте? юзайте штатные сокеты, их все современные браузеры давно поддерживают, зачем вам этот sockets.io?". Третьи...
Кароче, беру пример с данной Вами ссыли (надеюсь, он каноничен), и начинаю лабать по нему
Кстате, архитектуру игры, уже решил изменить. Node оно ведь уже, веб-сервер делает (собою) - вот этот же веб-сервер, и будет выдавать клиенту-браузеру клиентскую веб-страницу, в которой на канвасе браузер тот вшитым в эту страницу javascriptом отрисует "клиент игры" (заодно, и поддерживать всё это хозяйство проще будет, не надо хранить клиентскую страницу на отдельном хостинге, ведь node это уже "хостинг" сама)
(т.е. теперь, опровергая написанное мной выше, мне уже "нужны какие-то веб-страницы" - конкретно клиентскую страницу в браузер клиенту будет выдавать node работая как веб-сервер)

@BANO · 13.01.2017, 22:18

Сообщение от SilverSurfer

Node оно ведь уже, веб-сервер делает - вот этот же веб-сервер

Нода - серверный интерпретатор js. Он может быть хоть ftp-сервером, хоть жаббер-сервером, если использовать нужные либы.
Для статики (стили, html, сам клиентский js) лучше отдавать специальными серверами, типа apache, nginx и ещё есть некоторые. Пусть они этим занимаются, чем использовать ноду для этой муторной работы. Как показывает практика, нода плохо работает со статикой. Медленно. Поэтому её используют только для api.

@SilverSurfer · 13.01.2017, 23:52 **[ТС]**

Да мне и не надо быстро. Мне надо просто. Чем проще, тем лучше. В браузер клиенту, нода отдаёт страницу всего 1 раз, при заходе этим браузером на веб-адрес (с портом) по которому на компе-сервере крутится-работает эта самая нода. А сама та клиентская веб-страница, представляет из себя 1 html из 5 строчек, 2 из которых относятся к канвасу на этой странице и к javascript-у который дальше на нём всё рисует (рисует, уже выполняясь на стороне браузера клиентского)
А дальше, просто обмен сообщениями клиент-сервер - это как я понимаю сейчас методы XmlHttpRequest. Можно асинхронно, но можно и синхронно, для простоты, и чтобы клиент F5 там у себя не жал (пусть лучше повисит зависнувшим, до ответа с сервера))

Вот озолочусь на своей новой игре (когда это будет...)), понакуплю тогда себе профи-серваков с апачами и т.п..

Добавлено через 22 минуты
С XmlHttpRequest это я тут наверное перестарался (или перекурил), ведь все сообщения клиент-сервер будут слаться методами вебсокетов

vic5710 · 14.01.2017, 00:20

Сообщение от SilverSurfer

ведь все сообщения клиент-сервер будут слаться методами вебсокетов

продумай авторизацию и переподключение, это будет гут

@SilverSurfer · 14.01.2017, 15:47 **[ТС]**

Такой вопрос
Как вот в этом: https://learn.javascript.ru/websockets
- и без помощи socket.io
- сделать выдачу браузеру клиента (при его подключении к серверу), клиентской вебстраницы в него?
(она хранится в поддиректории "public")

- разобрался сам, по примеру: https://habrahabr.ru/post/307744/

Добавлено через 6 минут
Блин, да это просто пир-духа. По одному порту саму страницу в браузер выдаёт, по другому листенер вебсокетов (ну тобиш, вебсокет-сервер)

Добавлено через 13 минут
А сейчас я зашёл на эту страницу через интернет по туннелю ngrok проброшенному на тот порт. Да плин, я нереально счастлив )
По ходу, надо пробрасывать два туннеля - на 2 этих порта (один под страницу, другой под вебсокеты)

Добавлено через 14 часов 39 минут
Вот такой вот вопрос: (пока работаем чисто локально, безо всякого ngrok и т.п.)
Согласно примеру, делаю в server.js статик-сервер так:

JavaScript
1
2
3
4
5
6
7
// обычный сервер (статика) на порту 8080
var fileServer = new Static.Server('./public');
http.createServer(function (req, res) {
  
  fileServer.serve(req, res);
 
}).listen(8080);

- где "public" - подпапка в которой у меня лежат клиентские index.html и client.js

Запускаю node server.js

Захожу файрфоксом на localhost:8080, и всё отлично работает - в браузер выдаётся index.html, client.js корректно работает
Могу прямо "не отходя от кассы", поменять что-то в файле client.js. Жму F5 в файрфоксе - и всё ок, выскочила обновлённая версия клиентской страницы, в ней работает новый client.js - всё ок.

Но вот яндекс.браузер. Он всегда почему-то упорно показывает старую версию страницы - на ней работает старый client.js (причём даже непонятно, откуда именно браузер берёт старую версию client.js). Перезапустишь всё (включая ноду) - всё равно, яндекс.браузер, после захода им на localhost:8080, упорно кажет старую версию страницы, в ней работает старый client.js (откуда этот браузер вообще его откопал???)

Когда пробовал с библиотекой ноды "express", страница выдавалась всегда отлично во все браузеры. Но не хочу юзать сейчас эту библиотеку, хочу чтобы работал "штатный" статик-сервер

Помогите, пожалуйста - почему яндекс.браузер, так себя ведёт?

@BANO · 14.01.2017, 21:30

Сообщение от SilverSurfer

(откуда этот браузер вообще его откопал???)

Из кеша.

Добавлено через 40 секунд
У меня лично в dev tools сразу стоит во вкладочке network галка на "disable cache"

@8Observer8 · 15.01.2017, 00:19

Сообщение от SilverSurfer

и без помощи socket.io

Чем вам не нравится socket.io? По-моему, вполне подходяще, особенно для пошаговой игры.

Кликните здесь для просмотра всего текста

@SilverSurfer · 17.01.2017, 11:09 **[ТС]**

Со статиком разобрался, теперь фурычит всё нормально, во всех браузерах
Протестил работу через ngrok. Запускаю 2 нгрока - один пробрасывает порт 8080 (статик), второй пробрасывает порт 8081 (вебсокет-сервер). Время отклика сервера (принять сообщение от клиента, ответить на него) - посредственное (не мгновенно, а примерно полсекунды), но устраивает

Чем не нравится socket.io. А что он собственно даёт? Как понимаю, socket.io это некоторый "костыль", который сделали, когда только изобрели вебсокеты, но поддержки их браузерами и т.п. не было. Сейчас, всё есть. Как читал, socket.io позволяет работать с вебсокетами изо старых браузеров (мне это не нужно), но функционал беднее чем в современных штатных вебсокетах (мне это нужно). Так зачем мне сейчас костыль этот лепить?

P.S. Потом выложу свою архитектуру (с нгроком, и базовым кодом сервера и клиента по работе с вебсокетами) в качестве мини-туториала, сам всю инфу чтобы всё это сделать, копал в инете неделю.

@8Observer8 · 17.01.2017, 13:08

Сообщение от SilverSurfer

Так зачем мне сейчас костыль этот лепить?

Это не костыль, а удобная обёртка над над веб сокетами. Ну раз вы увидели, что там нет того функционала, что вам нужен, то на нет и суда нет.

@SilverSurfer · 17.01.2017, 15:56 **[ТС]**

А чем эта "обёртка", удобнее штатных веб-сокетов? Пока, я не увидел этого

@8Observer8 · 18.01.2017, 13:08

Сообщение от SilverSurfer

А чем эта "обёртка", удобнее штатных веб-сокетов? Пока, я не увидел этого

Удобнее, потому что работает без проблем на мобильных браузерах, куча лудей использует, соответственно много туторов, в книжках на англ. на нём делают. Тогда бы у вас не возникло бы столько много вопросов. Ну раз с веб сокетами разобрались и всё нормально работает, то и хорошо. Я пробовал работать с веб сокетами, когда книжку изучал по мультиплееру на node.js (Multiplayer Game Development with HTML5), а там только в первой главе веб сокеты, а дальше на socket.io. Привык в начале программирования очередной игры набрать node install socket.io и можно дальше работать над игрой и даже не беспокоиться, что могут быть какие-то проблемы и вопросы, потому что на любой чих можно найти быстро ответ в инете, так как куча народу давно использует socket.io, поэтому с ним удобнее работать.

vic5710 · 19.01.2017, 10:45

Сообщение от 8Observer8

node install socket.io

Bash
1
2
3
4
5
6
7
8
9
10
11
12
13
bash-3.2$ node install socket.io
module.js:471
    throw err;
    ^
 
Error: Cannot find module '/Users/admin/test/install'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3
bash-3.2$

дезинформация однако

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17

	Прошу совета - клиент-серверная онлайн-игра через web с браузерным клиентом на JavaScript 13.01.2017, 16:04. Показов 7199. Ответов 48 Метки нет (Все метки) Добрый день Суть моего обращения, такова: Разрабатываю компьютерную игру (пошаговую, передаваемые данные незначительны по объёму). Клиент, пишу на JavaScript HTML5 Canvas - с этим проблем не возникло, уже написал здоровый кусок этого клиента Теперь, надо продумать серверную архитектуру - на каком языке писать сервер игры, как задружить его с клиентами Стал рыть инет - сколько ни рыл, пока одни непонятки Суть в том, что (как понимаю) JavaScript не дружит с TCP-сокетами Дружит с веб-сокетами, но чтобы их реализовать на сервере, требуется какая-то просто диссертация как почитаешь Может быть, AJAX? Но как именно? Про node.js, читал. Тоже непонятки, как что, вроде не рекомендуют юзать Прошу добрых людей, направить меня носом моим в нужное русло. Чтобы избрать нормальную архитектуру сразу, и по сто раз не переделывать. Заранее спасибо за помощь. 0

@Egor.S 215 / 180 / 79 Регистрация: 02.10.2011 Сообщений: 651
	13.01.2017, 16:32
	я бы порекомендовал node + websocket 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	13.01.2017, 16:34 [ТС]
	Вот я тоже сейчас, склоняюсь к этому - а есть какие-нибудь простые тестовые примеры, серверного кода для вебсокетов? (с клиентом всё понятно, там методы в JavaScriptе достаточно простые) 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	13.01.2017, 17:27 [ТС]
	А, ну так мне никакие "веб-страницы", в принципе не нужны То что клиент игры сам на веб-странице - ну с тем же успехом он мог бы быть и как прога на компе (на канвасе, делаю его изначально лишь для простоты запуска с разных устройств этой игры, не требует установки и т.п.). Более того, на сервере игры веб-страница с этим канвасом, храниться точно не будет. Надо чтобы запустился клиент, и связался с сервером игры. Сервер игры - это прога на компьютере-сервере. Пока это будет мой домашний комп, на который туннель (на определённый порт) проброшен с помощью ngrok. Теперь, надо как-то организовать сокеты - в сервере, и в клиенте. А вот как именно? (чтобы в клиенте на JavaScript, с работой с ними было всё хорошо и просто - и желательно чтобы в проге-сервере игры, тоже). Тому, собсно, и посвящён мой вопрос Добавлено через 38 минут Судя по перемещению сабжа, нормальная архитектура это именно node.js ) Просветите пожалуйста меня по ней Вот ещё думаю, а мож клиент игры тогда, лучше не на JavaScript, а на чём-то другом? Что может Canvas отрисовывать. Или не Canvas, тоже сделать? Как лучше? 0

vic5710 963 / 718 / 276 Регистрация: 10.12.2016 Сообщений: 1,764
	13.01.2017, 18:04
	http://socket.io/demos/chat/ основы тут есть 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	13.01.2017, 21:49 [ТС]
	Читал Вот пишут, лучше использовать не socket.io, а штатные вебсокеты (которые сейчас поддерживаются всеми современными браузерами) Можно ли сыль на самый простой туториал (самый простой пример) по штатным вебсокетам (а не sockets.io)? 0

vic5710 963 / 718 / 276 Регистрация: 10.12.2016 Сообщений: 1,764
	13.01.2017, 21:55
	ну этого в гугле полно - socket.io/sockjs/websockets(ws) мнений много и меняется все быстро. socket.io больше всего в тренде, Кантор рекомендует sockjs (javascript.ru), там же и по ws есть инфо - https://learn.javascript.ru/websockets 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	13.01.2017, 22:11 [ТС]
	Да полно-то полно, только вот именно поэтому конечного понимания я пока не достиг, читая всё это чего полно. Одни пишут "надо socket.io". Другие на это пишут: "в какой глуши вы живёте? юзайте штатные сокеты, их все современные браузеры давно поддерживают, зачем вам этот sockets.io?". Третьи... Кароче, беру пример с данной Вами ссыли (надеюсь, он каноничен), и начинаю лабать по нему Кстате, архитектуру игры, уже решил изменить. Node оно ведь уже, веб-сервер делает (собою) - вот этот же веб-сервер, и будет выдавать клиенту-браузеру клиентскую веб-страницу, в которой на канвасе браузер тот вшитым в эту страницу javascriptом отрисует "клиент игры" (заодно, и поддерживать всё это хозяйство проще будет, не надо хранить клиентскую страницу на отдельном хостинге, ведь node это уже "хостинг" сама) (т.е. теперь, опровергая написанное мной выше, мне уже "нужны какие-то веб-страницы" - конкретно клиентскую страницу в браузер клиенту будет выдавать node работая как веб-сервер) 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	13.01.2017, 23:52 [ТС]
	Да мне и не надо быстро. Мне надо просто. Чем проще, тем лучше. В браузер клиенту, нода отдаёт страницу всего 1 раз, при заходе этим браузером на веб-адрес (с портом) по которому на компе-сервере крутится-работает эта самая нода. А сама та клиентская веб-страница, представляет из себя 1 html из 5 строчек, 2 из которых относятся к канвасу на этой странице и к javascript-у который дальше на нём всё рисует (рисует, уже выполняясь на стороне браузера клиентского) А дальше, просто обмен сообщениями клиент-сервер - это как я понимаю сейчас методы XmlHttpRequest. Можно асинхронно, но можно и синхронно, для простоты, и чтобы клиент F5 там у себя не жал (пусть лучше повисит зависнувшим, до ответа с сервера)) Вот озолочусь на своей новой игре (когда это будет...)), понакуплю тогда себе профи-серваков с апачами и т.п.. Добавлено через 22 минуты С XmlHttpRequest это я тут наверное перестарался (или перекурил), ведь все сообщения клиент-сервер будут слаться методами вебсокетов 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	17.01.2017, 11:09 [ТС]
	Со статиком разобрался, теперь фурычит всё нормально, во всех браузерах Протестил работу через ngrok. Запускаю 2 нгрока - один пробрасывает порт 8080 (статик), второй пробрасывает порт 8081 (вебсокет-сервер). Время отклика сервера (принять сообщение от клиента, ответить на него) - посредственное (не мгновенно, а примерно полсекунды), но устраивает Чем не нравится socket.io. А что он собственно даёт? Как понимаю, socket.io это некоторый "костыль", который сделали, когда только изобрели вебсокеты, но поддержки их браузерами и т.п. не было. Сейчас, всё есть. Как читал, socket.io позволяет работать с вебсокетами изо старых браузеров (мне это не нужно), но функционал беднее чем в современных штатных вебсокетах (мне это нужно). Так зачем мне сейчас костыль этот лепить? P.S. Потом выложу свою архитектуру (с нгроком, и базовым кодом сервера и клиента по работе с вебсокетами) в качестве мини-туториала, сам всю инфу чтобы всё это сделать, копал в инете неделю. 0

@SilverSurfer 0 / 0 / 0 Регистрация: 13.01.2017 Сообщений: 17
	17.01.2017, 15:56 [ТС]
	А чем эта "обёртка", удобнее штатных веб-сокетов? Пока, я не увидел этого 0