WebSocket事件和动作

精华

小牛编辑

185浏览

2023-03-14

WebSocket从客户端初始化并与服务器的连接以进行两端之间的通信。要初始化连接，需要使用带有远程或本地服务器的URL创建Javascript对象。

var socket = new WebSocket("ws://echo.websocket.org");

上面提到的URL是一个可用于测试和实验的公共地址。websocket.org服务器始终处于启动状态，并且在收到客户端消息时并将其发送回客户端。

下面是确保应用程序正常运行的最重要步骤。

Websocket事件

有四个主要的Web Socket API事件 -

打开
消息
关闭
错误

每个事件都通过分别实现onopen，onmessage，onclose和onerror函数等函数来处理。它也可以在addEventListener方法的帮助下实现。

事件和函数的简要概述如下 -

打开

当在客户端和服务器之间建立了连接，就会从Web Socket实例触发open事件。它称为客户端和服务器之间的初始握手。当建立连接就引发的事件被称为onopen。

消息

通常在服务器发送一些数据时发生消息事件。服务器发送给客户端的消息可以包括纯文本消息，二进制数据或图像。无论何时发送数据，都会触发onmessage函数。

关闭

关闭事件标志着服务器和客户端之间通信的结束。在onclose事件的帮助下，可以关闭连接。在onclose事件的帮助下标记通信结束后，服务器和客户端之间无法进一步传输消息。关闭事件也可能由于连接不良而发生。

错误

某些错误的错误标记，在通信期间发生。它是在onerror事件的帮助下标记的。在错误之后总是会终止连接。每个事件的详细描述将在后面的章节中讨论。

Web套接字操作

当事情发生时，通常会触发事件。另一方面，当用户想要发生某事时采取操作。通过用户使用函数的显式调用来执行操作。

Web Socket协议支持两个主要操作，即 -

send()
close()

send()
对于与服务器的某些通信，此操作通常是首选，包括发送包括文本文件，二进制数据或图像的消息。

在send()操作的帮助下发送的聊天消息如下 -

// get text view and button for submitting the message
var textsend = document.getElementById(“text-view”);
var submitMsg = document.getElementById(“tsend-button”);

//Handling the click event
submitMsg.onclick = function ( ) {
   // Send the data
   socket.send( textsend.value);
}

注 - 只有在连接打开时才可以发送消息。

close()
这个方法代表握手再见，它完全终止连接，在重新建立连接之前不能传输任何数据。

var textsend = document.getElementById(“text-view”);
var buttonStop = document.getElementById(“stop-button”);

//Handling the click event
buttonStop.onclick = function ( ) {
   // Close the connection if open
   if (socket.readyState === WebSocket.OPEN){
      socket.close( );
   }
}

也可以借助以下代码片段来关闭连接 -

socket.close(1000,"手动关闭连接...");