//SocketProvider.tsx
import React, { useContext, useEffect, useState } from 'react';
import { io } from 'socket.io-client';
/**
* 创建 context
*/
const SocketContext = React.createContext(null)
/**
* 调用 socket
*/
export function useSocket() {
return useContext(SocketContext)
}
/**
* 提供 socket
* @param children 子组件
*/
export function SocketProvider({ children }) {
const [socket, setSocket] = useState()
useEffect(()=>{
const newSocket = io('ws://localhost:7001')
setSocket(newSocket)
return () => newSocket.close()
}, [])
return (
<SocketContext.Provider value={socket}>
{children}
</SocketContext.Provider>
)
}
//app.tsx 中使用 SocketProvider
<SocketProvider>
{children}
</SocketProvider>
//子组件中调用 socket
const socket= useSocket()
console.log(socket)
//控制台 socket 对象
acks: proto: Object connected: false disconnected: true
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.