前端React集成websocket

React集成websocekt需要安装socket.io，安装完成后，将连接过程定义为一个模块，sicket.io会导出一个io函数，这个函数的参数就是websocket的连接地址和一些配置参数，其返回值是一个连接对象，项目中所有收发信息都是通过这个连接对象完成的，代码如下：

代码语言：javascript复制

import Socket from 'socket.io-client';
export const SocketSetver = Socket('http://localhost:8080');

代码非常简单，还有一些其他配置项，大家有兴趣可以自己去研究，这个文件的作用就是连接websocket并且导出连接对象，其他文件多次导入这个文件，连接过程也只是执行一次，这事js模块化的特性，所以大家不需要担心导入这个文件时会发生多次连接的现象。

如何使用呢？在需要的地方导入即可：

代码语言：javascript复制

import * as React from 'react';
import { Grid, Box, Card, Form } from '@alifd/next';
import styles from './index.module.css';
import { SocketSetver } from '@/utils/socket';

const { Row, Col } = Grid;
// eslint-disable-next-line no-unused-vars
const { useState, useEffect } = React;

const PersonBlock = () => {
  console.log("为什么不刷新");
 
  const [basicInfo, setBasicInfo] = useState({
    name: '张杰',
    code: '511132198212030011',
    committee: '13周岁组',
    trade: '新零售',
    aliasProject: '杭州阿里巴巴集团新零售',
    imgsrc: 'https://img.yuanmabao.com/zijie/pic/2021/12/08/pql34d3eeik.jpg'
  });
  console.log(basicInfo)
  useEffect(() => {
    console.log('又监听了');
    SocketSetver.on('connect', () => {
      console.log('Connected');

      SocketSetver.emit('events', { test: 'test' });
      SocketSetver.emit('identity', 0, (response) => console.log('Identity:', response));
    });
    SocketSetver.on('events', (data) => {
      console.log('event', data);
    });
    SocketSetver.on('exception', (data) => {
      try {
        console.log('exception', JSON.parse(data));
        setBasicInfo(JSON.parse(data));
      } catch (error) {
        console.log('exception', error);
      }
    });
    SocketSetver.on('disconnect', () => {
      console.log('Disconnected');
    });
    return () => {
      console.log('卸载了');
      SocketSetver.removeAllListeners();
    };
  }, []);
  return (
    <div className={styles.PersonBlock}>
      <Row wrap={true}>
        <Col span="7">
          <div className={styles.avator}>
            <img
              className={styles.avatorimg}
              src={basicInfo.imgsrc}
              alt=""
            />
          </div>
        </Col>
        <Col span="12">
          <Box spacing={20}>
            <Card free>
              <Card.Header title="基础信息" />
              <Card.Divider />
              <Card.Content>
                <div className={styles.content}>
                  <Form labelAlign="top" responsive>
                    <Form.Item colSpan={12} label="姓名：" required>
                      <span>{basicInfo.name}</span>
                    </Form.Item>
                    <Form.Item colSpan={12} label="身份证号码：" required>
                      <span>{basicInfo.code}</span>
                    </Form.Item>
                    <Form.Item colSpan={12} label="参赛组：" required>
                      <span>{basicInfo.committee}</span>
                    </Form.Item>
                    <Form.Item colSpan={12} label="所属行业" required>
                      <span>{basicInfo.trade}</span>
                    </Form.Item>
                    <Form.Item colSpan={12} label="参赛项目" required>
                      <span>{basicInfo.aliasProject}</span>
                    </Form.Item>
                  </Form>
                </div>
              </Card.Content>
            </Card>
          </Box>
        </Col>
      </Row>
    </div>
  );
};

export default PersonBlock;

代码很长，我们只分析其中有用的，首先是导入模块：

代码语言：javascript复制

import { SocketSetver } from '@/utils/socket';

然后是在useEffect函数中使用这个模块：

代码语言：javascript复制

useEffect(() => {
    console.log('又监听了');
    SocketSetver.on('connect', () => {
      console.log('Connected');

      SocketSetver.emit('events', { test: 'test' });
      SocketSetver.emit('identity', 0, (response) => console.log('Identity:', response));
    });
    SocketSetver.on('events', (data) => {
      console.log('event', data);
    });
    SocketSetver.on('exception', (data) => {
      try {
        console.log('exception', JSON.parse(data));
        setBasicInfo(JSON.parse(data));
      } catch (error) {
        console.log('exception', error);
      }
    });
    SocketSetver.on('disconnect', () => {
      console.log('Disconnected');
    });
    return () => {
      console.log('卸载了');
      SocketSetver.removeAllListeners();
    };
  }, []);

代码中首先监听了connect事件，然后监听其他自定义事件，这里监听其他自定义事件，理论上应该发生在connect之后，所以应该写在connect的回调函数中，但是我写在外面也没发生错误，就一直这样了，后面如果发现问题会及时更新。

当组件卸载时，我们应该卸载所有的事件，所以我们在useEffect函数中返回了一个函数，返回的函数中就是卸载socket连接对象的监听的事件，如果不卸载，页面卸载又重新加载，事件会被重复监听会对功能造成影响。

以上便是我在react中使用websocket的一点经验希望对你有所帮助。

socket.io react

0 人点赞