WebSockets - 事件与动作

客户端需要从客户端初始化与服务器的连接以实现它们之间的通信。为了初始化连接，需要使用远程或本地服务器的 URL 创建 Javascript 对象。

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

上述 URL 是一个公共地址，可用于测试和实验。websocket.org 服务器始终在线，当它接收到消息时会将其回传给客户端。

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

Web Sockets 事件

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

• Open
• Message
• Close
• Error

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

以下是对事件和函数的简要概述 −

Open

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

Message

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

Close

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

Error

error 表示通信过程中发生的某种错误。它通过 onerror 事件标记。Onerror 总是伴随着连接的终止。每个事件的详细描述将在后续章节中讨论。

Web Sockets 动作

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

Web Socket 协议支持两个主要动作，即 −

• send( )
• close( )

send ( )

此动作通常用于与服务器进行某些通信，包括发送消息，如文本文件、二进制数据或图像。

使用 send() 动作发送的聊天消息如下 −

// 获取文本视图和提交消息的按钮
var textsend = document.getElementById(text-view);
var submitMsg = document.getElementById(tsend-button);

// 处理点击事件
submitMsg.onclick = function ( ) {
   // 发送数据
   socket.send( textsend.value);
}

注意 − 只有在连接打开时才能发送消息。

close ( )

此方法表示告别握手。它完全终止连接，在重新建立连接之前无法传输任何数据。

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

// 处理点击事件
buttonStop.onclick = function ( ) {
   // 如果连接打开，则关闭连接
   if (socket.readyState === WebSocket.OPEN){
      socket.close( );
   }
}

也可以使用以下代码片段故意关闭连接 −

socket.close(1000,Deliberate Connection);