Categories: WebSockets教程

WebSockets-事件和动作

必须初始化从客户端到服务器的连接,以便它们之间进行通信。为了初始化连接,需要使用远程或本地服务器的URL创建Javascript对象。

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

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

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

Web Socket–事件

有四个主要的Web Socket API事件

  • Open
  • Message
  • Close
  • Error

每个事件都通过分别实现类似onopen ,onmessageoncloseonerror函数的功能来处理。也可以借助addEventListener方法来实现。

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

Open

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

Message

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

Close

关闭事件标志着服务器与客户端之间的通信结束。借助onclose事件可以关闭连接。在借助onclose事件标记通信结束之后,无法在服务器和客户端之间进一步传输任何消息。由于连接性不佳,也可能导致事件关闭。

Error

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

Web socket–操作

事件通常在发生某些事情时触发。另一方面,当用户希望发生某些事情时,将采取措施。通过用户使用函数显式调用来执行操作。

Web套接字协议支持两个主要操作,即-

  • 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”);
terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

1 天 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

1 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

3 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago