Связь клиент-сервер в Node.js - PullRequest
Новая
       2

Связь клиент-сервер в Node.js

0 голосов
/ 19 сентября 2018

Я недавно заходил в node.js, чтобы сделать онлайн-игру (для образования).Читая различные уроки, я пришел к простому коду, показанному ниже.Имея код, который у меня есть, я могу общаться между клиентом и сервером, и это в основном все, что мне нужно для создания игры.Есть только одна проблема, только клиент может инициировать диалог, тогда как сервер может только ответить.В дополнение к этому мне также необходимо в любой момент времени отправить текущее состояние игры с сервера на клиент.Например, в игре для двух игроков, когда игрок отправляет команду, которая изменяет игровое состояние, это новое игровое состояние должно быть передано ОБА игрокам.

Есть ли в node.js простой способ сделать это?Я знаю, что вы не можете просто отправить сообщение клиенту, поскольку нельзя ожидать, что у клиента будет открыт порт для использования сервером, но, может быть, у клиента есть способ оставить соединение для использования сервером?Я из тех парней, которые учатся на собственном примере, поэтому будет полезен какой-то простой рабочий код.

Кстати, я веду игру на firebase, если это актуально.

index.js: 

const functions = require('firebase-functions');
const express = require('express');

const app = express();

app.post('/game', (request, response) => {
    request.body.randomNumber = Math.random();
    console.log(request.body);
    response.json(request.body);
});

exports.app = functions.https.onRequest(app);

index.html: 

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>

    <input type="text" id="commandbox" onkeypress="send(this)">
    <br>
    <div id="display"></div>

    <script>
      const send = (ele) => {
        if (event.key === 'Enter') {
          console.log(ele.value);
          const json = {
            name: "John",
            gender: "male",
            age: 25, 
            message: ele.value
          };
          postToGame(json);
        }
      };
    </script>

    <script>
      const postToGame = (json) => {
        const xhr = new XMLHttpRequest();
        xhr.open("POST", '/game', true);
        xhr.setRequestHeader("Content-type", "application/json");
        xhr.onload = () => {
          if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("display").innerHTML = xhr.responseText;
          }
        };
        xhr.send(JSON.stringify(json));
      }
    </script>

  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 20 сентября 2018

База данных Firebase Realtime - еще одна альтернатива.

https://github.com/firebase/quickstart-js/blob/master/database/scripts/main.js

<!-- index.html file in client browser -->
<script src="/__/firebase/5.5.0/firebase-app.js"></script>
<script src="/__/firebase/5.5.0/firebase-auth.js"></script>
<script src="/__/firebase/5.5.0/firebase-database.js"></script>
<script src="/__/firebase/init.js"></script>

<script src="scripts/main.js"></script>

<!-- main.js file in client browser -->
// Create new comment.
// createNewComment, commentInput, addCommentForm is defined in the main.js
addCommentForm.onsubmit = function(e) {
    e.preventDefault();
    createNewComment(postId, firebase.auth().currentUser.displayName, uid, commentInput.value);
    commentInput.value = '';
    commentInput.parentElement.MaterialTextfield.boundUpdateClassesHandler();
};
// Listen for comments.
// addCommentElement, postElement is defined in the main.js
var commentsRef = firebase.database().ref('post-comments/' + postId);
commentsRef.on('child_added', function(data) {
    addCommentElement(postElement, data.key, data.val().text, data.val().author);
});
0 голосов
/ 19 сентября 2018

Я бы использовал для этого websockets.После того, как вы установили соединение, вы можете инициировать сообщения с любой стороны. WS npm пакет делает это довольно легко.

Пример сервера (с использованием пакета ws npm): 

    const WebSocket = require('ws');

    // Set up server
    const wss = new WebSocket.Server({ port: 8080 });

    // Wire up some logic for the connection event (when a client connects) 
    wss.on('connection', function connection(ws) {

      // Wire up logic for the message event (when a client sends something)
      ws.on('message', function incoming(message) {
        console.log('received: %s', message);
      });

      // Send a message
      ws.send('Hello client!');
    });

Клиентпример (здесь нет необходимости в каком-либо пакете, он встроен в большинство браузеров): 

// Create WebSocket connection.
const socket = new WebSocket('ws://localhost:8080');

// Connection opened
socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
});

// Listen for messages
socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
});

Существуют альтернативы, если вы не можете использовать веб-сокеты, такие как опрос (когда клиент периодически вызывает серверчтобы увидеть, есть ли сообщение), и длинный опрос (где сервер удерживает http-запрос открытым в течение искусственно долгого периода времени, пока сообщение не будет готово).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...