使用 Websockets 的 Redux-thunk

Posted 2023-02-22

【中文标题】使用 Websockets 的 Redux-thunk

【英文标题】：Redux-thunk with Websockets

【发布时间】：2016-10-31 07:28:17

【问题描述】：

当某些组件想要订阅数据时，我想按需创建一个 websocket。如何以 redux 方式共享 websocket 实例？

action.js

export function subscribeToWS(url) 
   return dispatch => 
      let websocket = new WebSocket(url)
      websocket.on('connect', () => 
         websocket.send("subscribe") 
      
      websocket.on('message', (message) => 
        dispatch(storeNewData(message))
      
    

我可以这样做，但这需要为每个新订阅创建一个新实例。

【参考方案1】：

放置持久连接对象之类的标准位置是在中间件内部。而且，事实上，实际上有几十个现有的中间件证明了这种方法，其中大多数都列在 https://github.com/markerikson/redux-ecosystem-links/blob/master/middleware.md#sockets-and-adapters 上。您应该能够按原样使用其中的一些，或者至少作为示例使用。

【讨论】：

我和 OP 有同样的问题——感谢上面的链接。我在那里看了看，发现了这个：github.com/luskhq/redux-ws，但该项目已被弃用，取而代之的是redux thunk。我之前在 http 异步请求中使用过 thunk，但我想知道是否有 websockets 的示例。我找不到任何东西。

我和@matthewatabet 有类似的问题。我正在寻找如何对来自 WebSocket 的新消息正确执行操作的示例。我想这很容易，但是一个简单的例子会非常有帮助。

@matthewatabet 这是一种方法***.com/questions/37876889/…，这是我遵循的教程，不确定是否是最好的方法，我是第一次这样做，所以...dev.to/aduranil/…跨度>

【参考方案2】：

您可以查看redux-websocket-bridge。它将 Web Socket 消息展开为 Redux action，并将 Redux action 中继到 Web Socket。

这种方法的好处：您可以在服务器上使用 Redux 作为 API 端点，用更少的代码替换标准 REST API。

另外，如果您的服务器不发送Flux Standard Action，您仍然可以使用redux-websocket-bridge 发送原始消息。它适用于string、ArrayBuffer 和Blob。当然，您总是可以编写一个小的中间件来将它们翻译成 Flux 标准动作，例如来自 Slack RTM API 的消息。

【讨论】：

找了这么多redux的socket库。我尝试使用“redux-socket.io”和“socket.io-client”连接到我的spring boot应用程序，但没有成功。你的回答解决了我所有的问题。我被困了这么多天。非常感谢

【参考方案3】：

虽然这是一个相当老的问题，但在寻找示例时会出现好几次。正如@matthewatabet 和@abguy 提到的那样，https://github.com/luskhq/redux-ws 只是提到它已被弃用，您可以使用 Redux Thunk，而没有特定于 Web 套接字的示例。

为了将来参考，我发现this article 概述了一个示例，该示例在 Github 存储库中实现，从 this file 开始。这是针对socket.io的，但是直接使用web sockets应该是类似的。

总结一下，在组件调用dispatch 和addNewItemSocket：

<RaisedButton
    label="Click to add!" primary=true
    onTouchTap= () => 
        const newItem = ReactDOM.findDOMNode(this.refs.newTodo.input).value
        newItem === "" ?  alert("Item shouldn't be blank")
                       :  dispatch(addNewItemSocket(socket,items.size,newItem)) 
                        /*: dispatch(addNewItem(items.size,newItem))*/
        ReactDOM.findDOMNode(this.refs.newTodo.input).value = ""
      
    
/>

在操作文件中，将addNewItemSocket 声明为：

export const addNewItemSocket = (socket,id,item) => 
    return (dispatch) => 
        let postData = 
                id:id+1,
                item:item,
                completed:false
             
        socket.emit('addItem',postData)     
       

要处理来自套接字的传入消息，在组件的构造函数中：

socket.on('itemAdded',(res)=>
   console.dir(res)
   dispatch(AddItem(res))
)

在actoins文件中，将AddItem声明为：

export const AddItem = (data) => (
    type: "ADD_ITEM",
    item: data.item,
    itemId:data.id,
    completed:data.completed
)

对我来说，这仍然是新事物，因此我们非常感谢任何反馈。我还将向https://github.com/luskhq/redux-ws 提交 PR，以便在此处列出示例。