{"id":223739,"date":"2020-11-24T09:19:01","date_gmt":"2020-11-24T01:19:01","guid":{"rendered":"http:\/\/4563.org\/?p=223739"},"modified":"2020-11-24T09:19:01","modified_gmt":"2020-11-24T01:19:01","slug":"socket-io-client-%e5%89%8d%e7%ab%af%e4%b8%80%e7%9b%b4%e7%9b%91%e5%90%ac%e5%8f%91%e9%80%81%e4%b8%8d%e4%ba%86%e6%b6%88%e6%81%af%e5%88%b0%e6%9c%8d%e5%8a%a1%e7%ab%af","status":"publish","type":"post","link":"http:\/\/4563.org\/?p=223739","title":{"rendered":"socket.io-client \u524d\u7aef\u4e00\u76f4\u76d1\u542c\u53d1\u9001\u4e0d\u4e86\u6d88\u606f\u5230\u670d\u52a1\u7aef"},"content":{"rendered":"<div>\n<div>\n<div>\n<h1>                  socket.io-client \u524d\u7aef\u4e00\u76f4\u76d1\u542c\u53d1\u9001\u4e0d\u4e86\u6d88\u606f\u5230\u670d\u52a1\u7aef               <\/h1>\n<p> <\/p>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : pin621 <\/span>  <span><i><\/i> 5<\/span> <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div isfirst=\"1\"> <\/p>\n<p>\/\/SocketProvider.tsx<\/p>\n<pre><code>import React, { useContext, useEffect, useState } from 'react'; import { io } from 'socket.io-client'; \/**  * \u521b\u5efa context  *\/ const SocketContext = React.createContext(null)  \/**  * \u8c03\u7528 socket  *\/ export function useSocket() {   return useContext(SocketContext) }  \/**  * \u63d0\u4f9b socket  * @param children \u5b50\u7ec4\u4ef6  *\/ export function SocketProvider({ children }) {   const [socket, setSocket] = useState()    useEffect(()=&gt;{     const newSocket = io('ws:\/\/localhost:7001')     setSocket(newSocket)      return () =&gt; newSocket.close()   }, [])    return (     &lt;SocketContext.Provider value={socket}&gt;       {children}     &lt;\/SocketContext.Provider&gt;   ) } <\/code><\/pre>\n<p>\/\/app.tsx \u4e2d\u4f7f\u7528 SocketProvider<\/p>\n<pre><code> &lt;SocketProvider&gt;   {children}  &lt;\/SocketProvider&gt; <\/code><\/pre>\n<p>\/\/\u5b50\u7ec4\u4ef6\u4e2d\u8c03\u7528 socket<\/p>\n<pre><code> const socket= useSocket()  console.log(socket) <\/code><\/pre>\n<p>\/\/\u63a7\u5236\u53f0 socket \u5bf9\u8c61<\/p>\n<p>acks: <strong>proto<\/strong>: Object connected: false disconnected: true<\/p>\n<\/p><\/div>\n<div> <b>\u5927\u4f6c\u6709\u8a71\u8aaa<\/b> (<span>2<\/span>)        <\/div>\n<div> <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<ul>\n<li data-pid=\"4495987\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : joesonw <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             socket.on(&#8216;connect&#8217;)\u4e4b\u540e\u624d\u7b97\u8fde\u4e0a\u5427<\/p>\n<p>\u7528 https:\/\/github.com\/streamich\/react-use\/blob\/master\/docs\/useAsyncFn.md \u8fd9\u4e2a\u5305\u4e00\u4e0b                                                            <\/p><\/div>\n<\/p><\/div>\n<\/li>\n<li data-pid=\"4495988\" data-uid=\"2\">\n<div>\n<div>\n<div> <span>\u8cc7\u6df1\u5927\u4f6c : zhongrs232 <\/span>  <\/div>\n<div> <i title=\"\u5f15\u7528\"><\/i>  <span>          <\/span> <\/div>\n<\/p><\/div>\n<div>                                                             \u5de7\u4e86\u8fd9\u5934\u50cf                                                            <\/div>\n<\/p><\/div>\n<\/li>\n<li>\n","protected":false},"excerpt":{"rendered":"<p>socket.io-client &hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[],"_links":{"self":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/223739"}],"collection":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=223739"}],"version-history":[{"count":0,"href":"http:\/\/4563.org\/index.php?rest_route=\/wp\/v2\/posts\/223739\/revisions"}],"wp:attachment":[{"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=223739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=223739"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/4563.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=223739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}