上一节:
下一节:

  WebSocket - 事件和动作

  • 简述

    有必要初始化从客户端到服务器的连接，以便它们之间进行通信。为了初始化连接，需要使用远程或本地服务器的 URL 创建 Javascript 对象。 
    
var socket = new WebSocket(“ ws://echo.websocket.org ”);
    上面提到的 URL 是一个公共地址，可以用于测试和实验。websocket.org 服务器始终处于启动状态，当它接收到消息并将其发送回客户端时。
    这是确保应用程序正常工作的最重要步骤。

  • WebSocket – 事件

    有四个主要的 WebSocket API事件-
    • Open
    • Message
    • Close
    • Error
    通过分别实现 onopen 、onmessage、onclose和onerror函数等函数来处理每个事件。也可以借助 addEventListener 方法来实现。
    事件和功能的简要概述如下 -

    Open

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

    Message

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

    Close

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

    Error

    错误标记是在通信过程中发生的一些错误。它是在onerror事件的帮助下标记的。Onerror之后总是连接终止。每个事件的详细描述将在后续章节中讨论。

  • WebSocket – 动作

    事件通常在发生某些事情时触发。另一方面，当用户想要某事发生时采取行动。操作是通过用户使用函数的显式调用来进行的。
    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”);
上一节:
下一节: