WebSockets - 事件和操作

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

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

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

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

Web 套接字 - 事件

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

• Open
• Message
• Close
• Error

每个事件都是通过分别实现onopen、onmessage、onclose和onerror函数来处理的。 也可以借助addEventListener方法来实现。

事件和功能的简要概述如下 −

Open

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

Message

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

Close

Close事件标志着服务器和客户端之间的通信结束。 借助 onclose 事件可以关闭连接。 通过onclose事件标记通信结束后，服务器和客户端之间将无法再传输任何消息。 由于连接不良也可能导致活动结束。

Error

错误标记表示通信过程中发生的某些错误。 它是借助 onerror 事件进行标记的。 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,”Deliberate Connection”);