前端React集成websocket
原创
React集成websocekt需要安装socket.io，安装完成后，将连接过程定义为一个模块，sicket.io会导出一个io函数，这个函数的参数就是websocket的连接地址和一些配置参数，其返回值是一个连接对象，项目中所有收发信息都是通过这个连接对象完成的，代码如下：
import Socket from 'socket.io-client';
export const SocketSetver = Socket('http://localhost:8080');代码非常简单，还有一些其他配置项，大家有兴趣可以自己去研究，这个文件的作用就是连接websocket并且导出连接对象，其他文件多次导入这个文件，连接过程也只是执行一次，这事js模块化的特性，所以大家不需要担心导入这个文件时会发生多次连接的现象。
如何使用呢？在需要的地方导入即可：
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: 'http://alfuser.quchangguan.cn/20210120-170803-img_temporary.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;
代码很长，我们只分析其中有用的，首先是导入模块：
import { SocketSetver } from '@/utils/socket';然后是在useEffect函数中使用这个模块：
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的一点经验希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读