以下示例:

创建一个名为WebSocketDemo的组件,当收到新的WebSocket消息时使用Text组件将其展示在页面上。

JavaScript
import * as React from 'react';
import { Text } from "react-native";


export function WebSocketDemo({ props }) {
	const url = 'ws://demo.websocket.url' // WebSocket地址
	const ws = React.useRef(null);
	const [wsMessage, setWsMessage] = React.useState('');

	const connectWebSocket = () => {

		if (!ws.current) { // 判断是否已经存在WebSocket实例,如无才执行初始化

			ws.current = new WebSocket(url); // 创建WebSocket实例

			//  WebSocket连接建立的处理
			ws.current.onopen = () => {
				console.log('WebSocket Open:', ws.current)

			};

			//  WebSocket出现错误后的处理
			ws.current.onerror = error => {
				console.error('WebSocket Error:', error);
			};

			//  接收到WebSocket消息的处理
			ws.current.onmessage = error => {
				console.log('WebSocket received a message:', event.data);
				setWsMessage(event.data);
			};

			//  WebSocket关闭连接
			ws.current.onclose = () => {
				ws.current = null; // 清空实例,释放内存

				//  关闭连接后的其他逻辑
				//  ...
				console.log('WebSocket Closed')
			};
		}
	}

	React.useEffect(() => {
		connectWebSocket();

		return (() => {
			//  卸载组件前断开WebSocket连接,释放内存
			if (ws.current) {
				ws.current.close();
			}
		});
	}, []);

	return (
		<Text>{wsMessage}</Text>
	)

}
分类: IT如何系列

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用 * 标注