如何在React中正确的使用socket.io客户端？

在本文中，将会给大家分享下我在 React 中使用 Socket.io 客户端的一些经验，希望对此有疑惑的朋友给予一些帮助，也许你会有一些更好的实现方式，欢迎交流！

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、重庆小程序开发公司、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了洪洞免费建站欢迎大家使用！

创建 Socket Context

本文的实现方式是使用状态管理工具保存 socket 实例，供子组件使用，如果使用了 React Hooks，可以用其提供的 useContext API，实现起来也很简单。

// contexts/socket.tsx
import { createContext, ReactNode, useContext } from 'react';
import io, { Socket } from 'socket.io-client';

const SOCKET_URL = 'ws://localhost:8080';
export const socket = io(SOCKET_URL, {
  transports: ['websocket'],
});

const SocketContext = createContext(socket);
SocketContext.displayName = 'SocketContext';

export const SocketProvider = ({ children }: { children: ReactNode }) => (
  {children}
);

export const useSocket = () => {
  const context = useContext(SocketContext);
  return context;
};

// contexts/index.tsx
import { ReactNode } from 'react';
import { SocketProvider } from './Socket';

const AppContextProviders = ({ children }: { children: ReactNode }) => (
  {children}
);

export default AppContextProviders;

其中  const socket = io(SOCKET_URL)​，有些朋友可能就有疑问了，为什么不执行下 socket.connect() 呢？

socket.io 客户端默认是自动链接的，如果声明了 autoConnect 属性为 false，则需要手动执行下链接。

以上，在页面第一次加载时会初始化 socket，解决了第一个问题：“React 单页面应用中如何防止出现多个 socket 实例”。

根组件提供 socket

在项目的 App.js 文件中引入我们自定义的 Providers，将 AppProviders 组件做为根组件放在最顶层，这样被包裹的组件都可以使用 AppProviders 组件提供的属性。也解决了第二个问题：“在任意的的组件内如何方便的取到 socket 实例”。

import AppProviders from './contexts';
import './App.css';

const App = () => (
  
    ...
  
);

export default App;

任意子组件中使用 socket

组件 A，监听服务器发来的消息。

useEffect() 是 React 内置的一个 Hook，如果第二个参数依赖项数组为空，那么传入的第一个函数在该组件内只会执行一次，依赖项数组只要有一个状态被更新，useEffect() 传入的第一个函数也将会被执行。

还需要注意的是 useEffect() 传入的第一个函数，它又返回的函数在函数组件卸载时被调用，通常我们会用 useEffect() 模拟类组件的 componentDidMount、componentWillUnmount 行为。

在组件卸载时，使用 socket.off() 移除事件监听器，实际上这可以预防内存泄漏，同时也解决了最开始提的第三个问题：“对于某个事件不要随着页面切换出现多个监听器”。

import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';

const ComponentA = () => {
  const socket = useSocket();

  useEffect(() => {
    // componentDidMount
    socket.on('message', handleMessage); // 监听消息
    return () => {
      // componentWillUnmount
      socket.off('message', handleMessage);
    };
  }, [socket]);
  
  return ();
};
    
export default ComponentA;

组件 B，发送消息到服务器。

在我们的组件 B 中，也可以使用自定义的 useSocket Hook 获取最开始初始化的 socket 实例，但这并不会产生一个新的 socket 实例。

import { useEffect } from 'react';
import { useSocket } from '../../contexts/Socket';

const ComponentB = () => {
  const socket = useSocket(); 
  const handleSendMessage = () => {
    socket.emit('compress', data); // 发送消息
  }
  
  return 

    // ...
    Send message
  
;
};
    
export default ComponentB;

名称栏目：如何在React中正确的使用socket.io客户端？
文章地址：http://www.shufengxianlan.com/qtweb/news19/252569.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联