将套接字连接传递给组件答案

【问题标题】：Passing a socket connection to a component将套接字连接传递给组件
【发布时间】：2019-07-04 16:52:55
【问题描述】：

我有一个使用 socket.io 的 react 应用程序，在我的应用程序中我有两条路由 (react-router-dom)。登录页面和聊天页面。

在我的登录页面/组件中，我需要将套接字定义为const socket =io();，以便我可以提交登录表单和socket.emit 一个加入事件。然后用户被重定向到聊天页面。

在我的聊天页面中，我还需要访问各种方法和事件的套接字。

但是我认为我认为定义 const socket = io(); 两次会建立另一个连接是正确的？有没有办法可以将套接字连接从登录页面传递到聊天页面？

为了清楚起见...

登录组件：

https://github.com/alienbuild/node-passthe40/blob/master/public/src/components/pages/Login.js

聊天组件：

https://github.com/alienbuild/node-passthe40/blob/master/public/src/components/pages/Chat.js

【问题讨论】：

理想情况下，您必须使用 Redux 或 Flux 之类的状态管理，但我可以看到您的应用程序中的页面很少，您可以在登录页面中使用 localstorage 并将套接字对象存储到 localstoarage 和在聊天组件中从 localstorage 中访问套接字对象以创建一个新对象。
@DhavalPatel 感谢您的回复。这确实是有道理的，如果我没有在我的登录和聊天组件中定义套接字变量，我该如何使用我定义的方法？
您只需要在登录页面中定义一次并将其存储到本地存储中，然后当您需要一个套接字对象时，您必须将其从存储中拉回。
@DhavalPatel 谢谢我想我明白了。我从文档中看到 io 接受一个 url 和选项。我可以直接将对象作为 url 传递给 io() 吗？
还有另一种方法，但不建议您可以将套接字对象存储在登录组件中，例如 window.socket=io();然后您可以在聊天组件中使用相同的对象，例如 const socket=window.socket;

标签： javascript reactjs socket.io

【解决方案1】：

您可以使用React Context 在您的组件之间共享套接字对象。

您需要创建一个上下文并将其导出。

import React from 'react'

const SocketContext = React.createContext()

export default SocketContext

并像使用它一样

import React
import SocketContext from './socket-context'
import * as io from 'socket.io-client'

const socket = io()

const App = props => (
  <SocketContext.Provider value={socket}>
    <YourChildComponent />
  </SocketContext.Provider>
)

export default App

更多信息Click Here

【讨论】：