要在前端实现WebSocket发送和接收TCP消息，你可以使用JavaScript的WebSocket API。WebSocket允许在浏览器和服务器之间建立持久的双向通信连接，这可以用于发送和接收消息。
以下是一个简单的示例，演示如何在前端使用WebSocket发送和接收TCP消息：
// 创建WebSocket连接
const socket = new WebSocket("ws://your_server_address");
// 监听连接打开事件
socket.addEventListener("open", (event) => {
console.log("WebSocket连接已打开");
// 发送消息给服务器
socket.send("Hello, Server!");
});
// 监听接收消息事件
socket.addEventListener("message", (event) => {
const receivedMessage = event.data;
console.log("从服务器接收到消息: " + receivedMessage);
// 处理接收到的消息，例如更新页面内容
});
// 监听连接关闭事件
socket.addEventListener("close", (event) => {
if (event.wasClean) {
console.log(`WebSocket连接已关闭，状态码: ${event.code}, 原因: ${event.reason}`);
} else {
console.error("WebSocket连接意外关闭");
}
});
// 监听连接错误事件
socket.addEventListener("error", (error) => {
console.error("WebSocket连接错误: " + error.message);
});
在这个示例中，你需要将 ws://your_server_address替换为你的服务器地址，确保服务器支持WebSocket。
- 使用
addEventListener方法来监听WebSocket的各种事件，包括连接打开、接收消息、连接关闭和连接错误。 - 在连接打开后，你可以使用
socket.send()方法发送消息给服务器。 - 接收到的消息将通过
message事件处理程序处理，你可以在其中执行自定义操作，例如更新页面内容。
请确保在你的服务器端实现WebSocket的处理，以便它可以接受和响应前端发送的消息。同时，考虑处理错误情况和关闭连接的情况以提高可靠性。
