WebSockets - 事件与动作

为了客户端和服务器之间能够进行通信，需要客户端初始化与服务器的连接。初始化连接需要使用远程或本地服务器的URL创建一个JavaScript对象。

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

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

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

Web Sockets – 事件

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

• 打开
• 消息
• 关闭
• 错误

每个事件都通过实现相应的函数来处理，例如onopen、onmessage、onclose和onerror函数。也可以使用addEventListener方法来实现。

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

打开

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

消息

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

关闭

关闭事件标志着服务器和客户端之间通信的结束。可以使用onclose事件关闭连接。在使用onclose事件标记通信结束之后，服务器和客户端之间将无法再传输任何消息。关闭事件也可能由于连接不良而发生。

错误

错误标志着通信过程中发生的一些错误。它使用onerror事件进行标记。Onerror之后总是会终止连接。每个事件的详细描述将在后面的章节中讨论。

Web Sockets – 动作

事件通常在发生某些事情时触发。另一方面，当用户希望发生某些事情时，就会采取行动。动作是由用户使用函数显式调用来执行的。

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,”Deliberate Connection”);