以下示例:
创建一个名为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>
)
}
0 条评论