AngularJs和Yii2实时操作

Question

我正在开发一个Yii2 REST API，并使用AngularJS作为前端消费。

我需要一种实时的方法，例如聊天，或者实现某些实时通知。

这是否可能？如何实现？我已经阅读了有关Ratchet、Socket.io和其他一些内容，但我无法弄清楚如何将它们与REST集成，或者这是否是正确的方法。

任何建议都将不胜感激。

- gabaros

---

一个REST API通过HTTP进行通信，实时通信通常使用WebSockets（在像Socket.io这样的好框架中具有回退到HTTP的功能，但这是透明的）。这两者在本质上是不同的。话虽如此，你完全可以在同一个应用程序中拥有HTTP REST端点和WebSockets端点。 - Igor Raush

那么，是否有可能在“websocket资源”上拥有相同的REST API？如何实现？ - gabaros

一个REST API通常使用HTTP请求方法（POST/PUT/DELETE/PATCH）来指定所请求的操作类型（读取/写入/删除/更新）。当然，这并不适用于WS。您可以编写一个WS监听器，它接受包含“类型”或“方法”属性的事件，并对实体进行操作。请注意，这种设计在多个方面违反了REST架构，并且从客户端的角度来看更难以使用。 - Igor Raush

我认为一个好的设计是，应用程序监听HTTP(S)端口，并在应用程序中指定一个路由，以便可以建立WS连接。使用Express/Socket.IO（Node.js）几乎可以轻松实现这种功能，但也应该可以使用PHP+框架实现。 - Igor Raush

谢谢@IgorRaush。你的意思是在REST API中有一个URL作为套接字连接，类似于https://url.to.api/chat-messages，所有都通过GET访问。如果我理解有误请见谅。 - gabaros

是的，虽然您的术语不太正确。 您将拥有一个网络应用程序，它封装了同时具有HTTP REST API和实时WebSockets端点。 这里 是使用Express / Socket.IO实现它的方法。 这只是概念的演示。 - Igor Raush

Answer 1

为了在您的网站上实现实时更新，您可以根据您的需求和前端组件更新速度的快慢来选择以下方法之一。

使用websocket

您可以使用类似于https://github.com/consik/yii2-websocket的库来在Yii2中实现它。但是，这将作为与您的REST API分开的服务运行。因此，您必须确保应用适当的安全实践。

使用带有超时的Angular函数

您可以使用几毫秒的超时不断轮询REST API的端点以接收更新后的值。

第二种方法会创建许多请求到API，这将增加服务器负载。因此，我更喜欢使用websocket的方法。

- SamW

Answer 2

在这里你有几个选项。

短轮询/长轮询（使用setTimeout）

app.controller("MyController", function($scope, $timeout, $http) {
    $scope.messages = [];

    $timeout(callAtTimeout, 3000);

    function callAtTimeout() {
        console.log("Timeout occurred");
        $http.get('PATH TO RESOURCE TO GET NEW MESSAGES').then(
            function(res) { // update $scope.messages etc... },
            function(err) { // handle error }
        );
    }
});

对于客户端的短轮询和长轮询，您发送请求，等待获取响应，然后等待3秒钟并再次发送。

服务器端的短/长轮询工作方式不同。短轮询将立即返回响应 - 无论是否有更改。长轮询，您保持连接打开，当有更改时，然后返回数据。注意不要保持太多连接打开。

Socket.io（WebSockets）

我建议您使用类似于node.js的东西在自己的Web服务器上实现WebSockets，或者使用Firebase之类的托管解决方案。

Firebase的好处是，从PHP，您可以向Firebase服务器上的REST端点发送POST请求。您的JavaScript可以连接到该端点并侦听更改并相应地更新DOM。这可能是所有实现中最简单的。

个人而言，我不会使用PHP进行套接字编程，但它是可行的。

- Gravy