Angular2 + Laravel实时＆amp;的WebSockets

Question

我构建了一个应用程序，我计划与Angular 2和laravel进行实时战斗。例如，你击中了＃34;攻击＆＃34;按钮，你的对手看到他的生活实时下降。

我的应用构建：

前端： 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

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

所以是的，您仍然需要某些东西（节点）来托管socket.io服务器以通过PHP或其他方式与客户端进行交互。就个人而言，我完全跳过Laravel / PHP并且只使用带有koa / express /的节点来模拟你的客户端（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>" );
});

Answer 2

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

TLDR：

1. 通过套接字，节点服务器的所有数据执行api调用并向活动播放器广播更改
2. 直接从app使用API​​，使用pub / sub queue foo进行laravel和节点之间的通信，以便向活跃玩家广播更改

选项1：

• 角度前端应用
  • 设置websocket连接
  • 为游戏foo添加触发器，它将通过套接字连接发送数据并由您的nodeserver处理
  • 只谈到套接字
• 节点服务器
  • 提供前端应用
  • 处理套接字连接，每场比赛分配玩家
  • 处理套接字调用并调用laravel api对数据进行突变
  • 对游戏X中的玩家进行处理操作和广播更改
• Laravel REST API
  • Auth x
  • 默认CRUD foo

选项2：

• 角度前端应用
  • 直接与api会谈
  • 使用套接字侦听更新
• 节点服务器
  • 提供前端应用
  • 处理websocket数据
  • 在队列中侦听来自API的已发布数据
  • 通过套接字
  广播对游戏中玩家的更改
• Laravel REST API
  • 验证
  • 界面污物
  • Mutation x触发器在Redis或其他队列中发布，节点服务器可以/应该在其上侦听

我确信有更多方法可以设置它，你只需要决定你想要什么。也许介绍Redis是你不想要的，在这种情况下你的节点应用程序将有更多的事情要做。如果你想使用像Redis这样的东西，你需要从你的前端应用程序进行API调用，或者选择通过节点应用程序进行调用，结合2个选项。

Answer 3

如果你打算使用websockets，那么laravel的使用似乎就少了，因为只有一个套接字能够处理在前端和后端之间交换的所有数据，所以如果你不这样做的话。介意改变您的引擎，您可以尝试Meteor，https://www.meteor.com/