前端模拟 websocket 请求小工具

大广-全栈开发2025-03-27 20:06

背景：

后端写好websocket 接口后，用postman的某些版本无法直接模拟websocket请求，所以想着自制一个小工具。

使用方法：

直接复制以下代码到文本文件中，修改服务端端地址，保存为 .html的后缀名，用浏览器打开即可直接使用。

截图：

代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #messages {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            overflow-y: scroll;
            padding: 10px;
            margin-bottom: 10px;
        }
        input[type="text"] {
            width: 300px;
            padding: 5px;
        }
        button {
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <h1>WebSocket Client</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        let socket;

        function connect() {
            // Replace 'ws://example.com/socket' with your WebSocket server URL
            socket = new WebSocket('ws://localhost:8088/ws?token=333opqrst');

            socket.onopen = () => {
                console.log('Connected to WebSocket server');
            };

            socket.onmessage = (event) => {
                const messagesDiv = document.getElementById('messages');
                const messageElement = document.createElement('div');
                messageElement.textContent = `B: ${event.data}`;
                messagesDiv.appendChild(messageElement);
            };

            socket.onclose = () => {
                console.log('Disconnected from WebSocket server');
            };
        }

        function sendMessage() {
            if (!socket || socket.readyState !== WebSocket.OPEN) {
                alert('Not connected to the WebSocket server.');
                return;
            }

            const messageInput = document.getElementById('messageInput');
            const message = messageInput.value;
            socket.send(message);

            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.textContent = `A: ${message}`;
            messagesDiv.appendChild(messageElement);

            messageInput.value = '';
        }

        window.onload = connect;
    </script>
</body>
</html>