react前端websocket连接代码
时间: 2023-11-10 12:05:08 浏览: 40
以下是使用 React 进行 WebSocket 连接的示例代码:
```javascript
import React, { useState, useEffect } from 'react';
function App() {
const [socket, setSocket] = useState(null);
useEffect(() => {
// 创建 WebSocket 对象
const ws = new WebSocket('ws://localhost:8080');
// 连接成功时触发该事件
ws.onopen = function(event) {
console.log('WebSocket 连接成功');
};
// 接收到服务器发送的消息时触发该事件
ws.onmessage = function(event) {
console.log('接收到消息:', event.data);
};
// 连接关闭时触发该事件
ws.onclose = function(event) {
console.log('WebSocket 连接关闭');
};
// 将 WebSocket 对象保存到 state 中
setSocket(ws);
// 清理函数,关闭 WebSocket 连接
return function cleanup() {
ws.close();
};
}, []);
function sendMessage() {
// 向服务器发送消息
socket.send('Hello, WebSocket!');
}
return (
<div>
<button onClick={sendMessage}>发送消息</button>
</div>
);
}
export default App;
```
在上面的代码中,我们使用了 React 中的 `useState` 和 `useEffect` 钩子函数来创建和管理 WebSocket 对象。在 `useEffect` 中,我们创建了一个 WebSocket 对象,并且将其保存到 `socket` state 中。在组件销毁时,我们使用 `ws.close()` 方法关闭 WebSocket 连接。
我们还定义了一个 `sendMessage` 函数,用于向服务器发送消息。当用户点击发送消息的按钮时,该函数将被调用,向服务器发送消息。
需要注意的是,因为 WebSocket 连接是异步的,我们需要在 `useEffect` 中使用空的依赖数组 `[]` 来确保只会在组件挂载时创建一次 WebSocket 对象。如果我们不这样做,每次组件更新时都会创建一个新的 WebSocket 对象,这可能会导致连接过多,影响性能。