一、原生 WebSocket API
import React, { useEffect, useState } from "react";
const MyComponent = () => {
const [socket, setSocket] = useState(null);
const [message, setMessage] = useState("");
useEffect(() => {
const newSocket = new WebSocket("ws://localhost:8080");
newSocket.addEventListener("open", () => {
console.log("WebSocket连接已打开");
});
newSocket.addEventListener("message", (event) => {
setMessage(event.data);
});
newSocket.addEventListener("close", () => {
console.log("WebSocket连接已关闭");
});
newSocket.addEventListener("error", (error) => {
console.log("WebSocket出错：", error);
});
setSocket(newSocket);
return () => {
// 组件卸载时关闭WebSocket连接
if (newSocket) {
newSocket.close();
}
};
}, []);
const sendMessage = () => {
if (socket) {
socket.send("你好，服务器！");
}
};
return (
<div>
<p>收到的消息：{message}</p>
<button onClick={sendMessage}>发送消息</button>
</div>
);
};
export default MyComponent;
