客户端WebSocket实例_java webscoket客户端发送消息和接受服务端消息回调-CSDN博客

本文链接：https://blog.csdn.net/joyvonlee/article/details/97804342

本文详细介绍了WebSocket的构造函数、事件、方法及属性，并通过一个实例展示了如何使用WebSocket进行客户端与服务器之间的实时通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构造函数

WebSocket(url, [protocol])

该构造函数会返回一个websocket对象

事件

open事件：建立连接时触发，
massage事件：接收到服务端发来的消息时触发，
error事件：通信发生错误时触发，
close事件：关闭连接时触发

方法

Websocket.send(data)    // 向服务器发送消息

Websocket.close()       // 关闭当前连接

属性

WebSocket.binaryType        // 使用二进制的数据类型连接

WebSocket.bufferedAmount    // 未发送至服务器的字节数

WebSocket.extensions        // 服务器选择的扩展

WebSocket.onclose           // 用于指定连接关闭后的回调函数

WebSocket.onerror           // 用于指定连接失败后的回调函数

WebSocket.onmessage         // 用于指定当从服务器接受到信息时的回调函数

WebSocket.onopen            // 用于指定连接成功后的回调函数

WebSocket.protocol          // 服务器选择的下属协议

WebSocket.readyState        // 当前的链接状态

WebSocket.url               // WebSocket 的绝对路径

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket -- 实例</title>
</head>
<body>
    <input type="text" id="value">
    <button id="send">send</button>
    <div id="container"></div>


<script>
let value = document.getElementById("value");
let send = document.getElementById("send");
let container = document.getElementById("container");
let ws = new WebSocket('ws://echo.websocket.org')
ws.addEventListener('open', () => {
    console.log("concat")
    container.innerHTML = "连接成功";
})

send.addEventListener('click', function() {
    let data = value.value;
    ws.send(data)
})

ws.addEventListener('message', (data) => {
    container.innerHTML +=  ' </br> '+ data.data;
})



</script>
</body>
</html>

该实例使用了官方的接口，客户端发送了什么数据过去，它就会返回相同的数据。