【study】建立websocket链接--- highlight: a11y-dark --- ```js // 创建

// 创建 WebSocket 连接 const socket = new WebSocket('ws://localhost:8080');

// 连接打开事件 
socket.addEventListener('open', function (event)  { 
     console.log('WebSocket is connected.'); 
     // 发送消息给服务器 
     socket.send('Hello Server!');
});

// 监听消息事件 
socket.addEventListener('message', function (event) { 
      console.log('Message from server: ', event.data);
}); 


// 连接关闭事件 
socket.addEventListener('close', function (event) { 
       console.log('WebSocket is closed.');
});


// 连接错误事件 
socket.addEventListener('error', function (event) { 
      console.error('WebSocket error observed:', event);
}); 


// 发送消息封装函数 
function sendMessage(message) { 
      if (socket.readyState === WebSocket.OPEN) { 
           socket.send(message); 
      } else {
          console.error('WebSocket is not open. Ready state: ', socket.readyState);
      }
}

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
    <script>
        // 创建 WebSocket 连接
        const socket = new WebSocket('ws://localhost:8080');

        // 连接打开事件
        socket.addEventListener('open', function (event) {
            console.log('WebSocket is connected.');
            // 发送消息给服务器
            socket.send('Hello Server!');
        });

        // 监听消息事件
        socket.addEventListener('message', function (event) {
            console.log('Message from server: ', event.data);
        });

        // 连接关闭事件
        socket.addEventListener('close', function (event) {
            console.log('WebSocket is closed.');
        });

        // 连接错误事件
        socket.addEventListener('error', function (event) {
            console.error('WebSocket error observed:', event);
        });

        // 发送消息封装函数
        function sendMessage(message) {
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(message);
            } else {
                console.error('WebSocket is not open. Ready state: ', socket.readyState);
            }
        }

        // 添加测试按钮
        const button = document.createElement('button');
        button.innerText = 'Send Message';
        button.onclick = () => sendMessage('Test message from client');
        document.body.appendChild(button);
    </script>
</body>
</html>