Angular2 + Laravel 与实时和 WebSockets

Angular2 + Laravel with Real time & WebSockets

提问by TheUnreal

I built an app and i'm planning to make a real time battle with Angular 2 and laravel. For example, you hit the "attack" button, and your opponent see his life going down in real time.

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

My app built with:

我的应用程序构建于：

frontend:Angular 2

前端：Angular 2

Backend:PHP Laravel 5.2

后端：PHP Laravel 5.2

Now I'm searching and learning for my real time battle component, and I saw different guides and tutorials for it:

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

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/

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/

The firsttutorial is about how to use Laravel 5 and socket io.

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

The secondone is how to use Angular 2 with NODS JS and socket io.

在第二一个是如何利用角2 NODS JS和插座IO。

When I say real time, I mean that both users see the same thing that is happening on the screen)

当我说实时时，我的意思是两个用户看到屏幕上发生的相同的事情）

My Backend and Frontend are totally divided and I have no setup with NodeJS anywhere in my app.

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

Both users need to see actions happening during a battle in my app, and It need to go through my laravel API and shown via my Angular 2 battle component

两个用户都需要在我的应用程序中查看战斗期间发生的操作，并且需要通过我的 Laravel API 并通过我的 Angular 2 战斗组件显示

My question is -

我的问题是——

What's the best approach to real time app (seem websockets) using Angular2 and Laravel 5.2 to get the desired result of what I'm trying to achieve?

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

采纳答案by dvlsg

Laravel in this context is just templating and serving the client files, and acting as an interface inbetween the client and the socket.io server. It doesn't actually act as the socket.io server, and I don't believe it can.

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

So yes, you would still need something (node) to host the socket.io server to interact with the client, through PHP or otherwise. Personally, I'd skip Laravel/PHP altogether and just use node with koa/express/whatever to template your client (html/js/css/etc) files. Feels like an unnecessary abstraction to me.

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

The code below from socket.blade.phpalready has a connection to the actual socket.ioserver, so I don't see why the additional overhead of an HTTP POST through PHP/Laravel is a good idea. Security, perhaps, but you can handle that with the actual socket.io server as well.

下面的代码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>" );
});

回答by Robert

For the real-time character of your use-case, websockets are definitely the way to go. The players that should get the updates should be in the same 'room', so you can broadcast changes more easily. For the other functionality you can either use websockets or regular API calls to your backend directly from your client-side app code with some kind of communication between your api and the socket server, e.g. through Redis.

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

TLDR:

域名注册地址：

1. All data through sockets, node server does api calls and broadcasts changes to active players
2. Use API from app directly, use pub/sub queue foo for communication between laravel and node to broadcast changes to active players

1. 所有数据都通过套接字，节点服务器执行 API 调用并向活动玩家广播更改
2. 直接从应用程序使用 API，使用 pub/sub 队列 foo 在 laravel 和节点之间进行通信以将更改广播给活动玩家

Option 1:

选项1：

• Angular frontend app
  • Set up websocket connection
  • Add triggers for game foo which will send data over the socket connection and is handled by your nodeserver
  • Only talks to sockets
• Node server
  • Serves frontend app
  • Handles socket connections, divide players per game
  • Handles socket calls and calls laravel api to do mutations on your data
  • Process action and broadcast changes to players in game X
• Laravel REST API
  • Auth x
  • Default CRUD foo

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

Option 2:

选项 2：

• Angular frontend app
  • Talks to api directly
  • Uses sockets to listen for updates
• Node server
  • Serves frontend app
  • Handle websocket data
  • Listen on queue for published data from API
  • Broadcast changes to players in game x over socket
• Laravel REST API
  • Auth
  • Crud
  • Mutation x triggers publish in Redis or other queue, which the node server can/should listen on

• Angular 前端应用
  • 直接与api对话
  • 使用套接字监听更新
• 节点服务器
  • 为前端应用提供服务
  • 处理 websocket 数据
  • 侦听队列以获取来自 API 的已发布数据
  • 通过套接字向游戏 x 中的玩家广播更改
• Laravel REST API
  • 认证
  • 原油
  • 突变 x 触发在 Redis 或其他队列中发布，节点服务器可以/应该监听

I'm sure there are more ways you can set this up, you just have to decide where you want what. Maybe introducing Redis is something you do not want, in that case your node app will have more to do. If you do want to use something like Redis, you'll need to do API calls from either your frontend app or choose to do it through the node app anyway, combining the 2 options.

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

回答by deviprsd

If you are planning to use websockets then there seems to be less use of laravel as only one socket is pretty capable of handling all the data that will be exchanged between the frontend and the backend, so if you don't mind changing your engine you can try Meteor, https://www.meteor.com/

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