具有实时和 WebSockets 的 Angular2 + Laravel

Question

我构建了一个应用程序，并计划与 Angular 2 和 laravel 进行实时战斗。例如，您按下“攻击”按钮，您的对手实时看到他的生命正在下降。

我的应用构建于：

前端： Angular 2

后端： PHP Laravel 5.2

现在我正在搜索和学习我的实时战斗组件， 我看到了不同的指南和教程：

1. https://www.codetutorial.io/laravel-5-and-socket-io-tutorial/
2. http://4dev.tech/2016/02/creating-a-live-auction-app-with-angular-2-node-js-and-socket-io/

第一个教程是关于如何使用Laravel 5和socket io。

第二个是如何将Angular 2与NODS JS和socket io一起使用。

当我说实时时，我的意思是两个用户在屏幕上看到的都是同一件事）

我的后端和前端完全分开，我的应用程序中的任何地方都没有设置 NodeJS。

两个用户都需要在我的应用中看到战斗期间发生的动作，并且它需要通过我的 laravel API 并通过我的 Angular 2 战斗组件显示

我的问题是 -

使用 Angular2 和 Laravel 5.2 获得我想要达到的预期结果的实时应用程序（似乎是 websockets）的最佳方法是什么？

Answer 1

如果您打算使用 websockets，那么似乎很少使用 laravel，因为只有一个 socket 能够处理将在前端和后端之间交换的所有数据，所以如果您不介意更改你的引擎你可以试试 Meteor，https://www.meteor.com/

Answer 2

对于您的用例的实时特性，websockets 绝对是要走的路。应该获得更新的玩家应该在同一个“房间”中，这样​​您就可以更轻松地广播更改。对于其他功能，您可以直接从客户端应用程序代码使用 websockets 或常规 API 调用到您的后端，并在您的 api 和套接字服务器之间进行某种通信，例如通过 Redis。

TLDR：

1. 所有数据通过套接字，节点服务器进行 api 调用并将更改广播给活跃玩家
2. 直接使用应用程序的 API，使用 pub/sub queue foo 在 laravel 和 node 之间进行通信，将更改广播给活跃玩家

选项 1：

• Angular 前端应用程序
  • 设置 websocket 连接
  • 为游戏 foo 添加触发器，它将通过套接字连接发送数据并由您的节点服务器处理
  • 只与套接字对话
• 节点服务器
  • 提供前端应用程序
  • 处理套接字连接，按游戏划分玩家
  • 处理套接字调用并调用 laravel api 对您的数据进行更改
  • 在游戏 X 中处理动作并向玩家广播更改
• Laravel REST API
  • 授权 x
  • 默认 CRUD foo

选项 2：

• Angular 前端应用程序
  • 直接与 api 对话
  • 使用套接字监听更新
• 节点服务器
  • 提供前端应用程序
  • 处理 websocket 数据
  • 在队列中侦听来自 API 的已发布数据
  • 通过套接字向游戏 x 中的玩家广播更改
• Laravel REST API
  • 授权
  • 粗鲁
  • Mutation x 触发器在 Redis 或其他队列中发布，节点服务器可以/应该在这些队列上监听

我相信您可以通过更多方式进行设置，您只需要决定您想要什么。也许引入 Redis 是您不想要的，在这种情况下，您的节点应用程序将有更多工作要做。如果您确实想使用 Redis 之类的东西，则需要从前端应用程序执行 API 调用，或者选择通过节点应用程序执行此操作，结合 2 个选项。

Answer 3

在这种情况下，Laravel 只是模板化和服务客户​​端文件，并充当客户端和 socket.io 服务器之间的接口。它实际上并不能充当 socket.io 服务器，我不相信它可以。

所以是的，您仍然需要一些东西（节点）来托管 socket.io 服务器以通过 PHP 或其他方式与客户端交互。就个人而言，我会完全跳过 Laravel/PHP，只使用带有 koa/express/whatever 的 node 来模板化您的客户端（html/js/css/etc）文件。对我来说感觉像是一种不必要的抽象。

socket.blade.php 下面的代码已经连接到实际的socket.io 服务器，所以我不明白为什么通过 PHP/Laravel 的 HTTP POST 的额外开销是个好主意。也许是安全性，但您也可以使用实际的 socket.io 服务器来处理它。

var socket = io.connect('http://localhost:8890');
socket.on('message', function (data) {
    $( "#messages" ).append( "<p>"+data+"</p>" );
});