具有实时和 WebSockets 的 Angular2 + Laravel

Posted 2023-03-10

【中文标题】具有实时和 WebSockets 的 Angular2 + Laravel

【英文标题】：Angular2 + Laravel with Real time & WebSockets

【发布时间】：2016-08-12 00:37:50

【问题描述】：

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

我的应用构建于：

前端： Angular 2

后端： php Laravel 5.2

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

https://www.codetutorial.io/laravel-5-and-socket-io-tutorial/ 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）的最佳方法是什么？

【问题讨论】：

“当我说实时时，我的意思是两个用户看到屏幕上发生的事情是一样的”我认为 Firebase 对你来说可能是一个不错的选择！

@TheUnreal 你有什么解决办法吗？ .我也在使用相同的 laravel 和 angular，并尝试找出如何实现套接字。

【参考方案1】：

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

【参考方案2】：

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

TLDR：

所有数据通过套接字，节点服务器进行 api 调用并将更改广播给活跃玩家 直接使用应用程序的 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 个选项。

【参考方案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>" );
);

【讨论】：

Laravel 只是我的后端，Angular 2 是我的前端。我没有在我的 laravel 上使用任何模板。

这个例子是用 laravel 的刀片模板系统做模板。此外，在您提供的 laravel 示例中，socket.io 服务器仍然是您后端的一部分。请参阅 laravel 示例中的 server.js 部分。

您回答中的示例与 Angular2 没有任何关系，我用它来显示我的所有数据。您的示例显示了 laravel 模板系统，我不以任何方式使用它..