react 对应的接收代码?
时间: 2023-07-10 20:15:32 浏览: 42
如果您是在React中实现在线聊天的长链接,那么您可以使用WebSocket API来建立WebSocket连接并接收消息。
以下是一个简单的React组件,它使用WebSocket API来连接到服务器并接收来自服务器的消息:
```jsx
import React, { useState, useEffect } from 'react';
const Chat = () => {
const [messages, setMessages] = useState([]);
const [socket, setSocket] = useState(null);
useEffect(() => {
const newSocket = new WebSocket('ws://localhost:8080/chat');
newSocket.onopen = () => {
console.log('WebSocket connected');
};
newSocket.onmessage = (event) => {
const message = JSON.parse(event.data);
setMessages([...messages, message]);
};
setSocket(newSocket);
return () => {
newSocket.close();
};
}, []);
const sendMessage = (message) => {
const newMessage = {
text: message,
timestamp: Date.now(),
};
socket.send(JSON.stringify(newMessage));
setMessages([...messages, newMessage]);
};
return (
<div>
<h1>Chat</h1>
<div>
{messages.map((message, index) => (
<div key={index}>
{message.text} - {new Date(message.timestamp).toLocaleString()}
</div>
))}
</div>
<form
onSubmit={(event) => {
event.preventDefault();
const input = event.target.elements.message;
const message = input.value;
input.value = '';
sendMessage(message);
}}
>
<input type="text" name="message" />
<button type="submit">Send</button>
</form>
</div>
);
};
export default Chat;
```
在上面的代码中,我们使用`useState`钩子来管理聊天消息和WebSocket连接。在`useEffect`钩子中,我们创建一个新的WebSocket连接并监听`onopen`和`onmessage`事件。当我们收到来自服务器的新消息时,我们使用`setMessages`更新消息状态。
在`sendMessage`函数中,我们将新消息发送到服务器,并使用`setMessages`更新消息状态。
在`return`语句中,我们在组件卸载时关闭WebSocket连接。
希望这个代码片段可以帮助您更好地了解React中实现在线聊天的长链接方面。