Question

我有一个使用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

Answer 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

将套接字连接传递到组件

1 个答案: