js 连接websocket

在JavaScript中，使用WebSocket API来连接WebSocket服务器是一个非常直接的过程。以下是一个简单的示例，展示了如何在客户端使用JavaScript连接到WebSocket服务器，并处理一些基本事件（如连接打开、接收到消息、连接关闭等）。

首先，确保WebSocket服务器正在运行并且可以接受连接。WebSocket服务器的URL格式通常类似于ws://hostname:port/path（对于非加密连接）或wss://hostname:port/path（对于加密连接）。

以下是一个简单的WebSocket客户端示例：

// WebSocket服务器的URL  
var wsUrl = "ws://localhost:8080/websocket";  
  
// 创建一个新的WebSocket连接  
var ws = new WebSocket(wsUrl);  
  
// 连接打开时触发的事件  
ws.onopen = function(event) {  
    console.log("Connection open ...");  
    // 连接打开后，你可以通过send()方法向服务器发送数据  
    ws.send("Hello Server!");  
};  
  
// 接收到服务器消息时触发的事件  
ws.onmessage = function(event) {  
    console.log("Received from server: " + event.data);  
    // 在这里处理从服务器接收到的数据  
};  
  
// 连接关闭时触发的事件  
ws.onclose = function(event) {  
    if (event.wasClean) {  
        console.log('Connection closed cleanly, code=' + event.code + ' reason=' + event.reason);  
    } else {  
        // 例如，服务器进程被杀死或网络问题  
        console.error('Connection died');  
    }  
};  
  
// 连接发生错误时触发的事件  
ws.onerror = function(error) {  
    console.error('WebSocket Error: ' + error);  
};  
  
// 如果需要，你也可以通过调用ws.close()来关闭连接  
// ws.close();

在上面的代码中，首先定义了WebSocket服务器的URL，并使用这个URL创建了一个新的WebSocket对象。然后，为这个对象添加了几个事件监听器：

• onopen：当连接成功打开时触发。
• onmessage：当客户端接收到来自服务器的消息时触发。
• onclose：当连接关闭时触发。
• onerror：当连接发生错误时触发。

请注意，在实际部署中，可能需要处理更复杂的错误情况，比如重连逻辑，以及在接收到特定消息时执行更复杂的操作。

此外，WebSocket协议支持两种类型的消息：文本消息（字符串）和二进制消息（如Blob或ArrayBuffer对象）。在上面的例子中，我们发送了一个文本消息（"Hello Server!"）。如果你需要发送二进制数据，你可以使用Blob或ArrayBuffer作为send方法的参数。

最后，请确保WebSocket服务器支持CORS（跨源资源共享），特别是在WebSocket客户端和服务器位于不同域或端口时。CORS策略可以防止不受信任的站点进行不安全的跨站请求。