本篇文章帮大家学习WebSocket事件和动作,包含了WebSocket事件和动作使用方法、操作技巧、实例演示和注意事项,有一定的学习价值,大家可以用来参考。
WebSocket从客户端初始化并与服务器的连接以进行两端之间的通信。要初始化连接,需要使用带有远程或本地服务器的URL创建javascript对象。
var socket = new WebSocket("ws://echo.websocket.org");
上面提到的URL是一个可用于测试和实验的公共地址。websocket.org服务器始终处于启动状态,并且在收到客户端消息时并将其发送回客户端。
下面是确保应用程序正常运行的最重要步骤。
Websocket事件
有四个主要的Web Socket API事件 -
打开
消息
关闭
错误
每个事件都通过分别实现onopen,onmessage,onclose和onerror函数等函数来处理。它也可以在addEventListener方法的帮助下实现。
事件和函数的简要概述如下 -
打开
当在客户端和服务器之间建立了连接,就会从Web Socket实例触发open事件。它称为客户端和服务器之间的初始握手。当建立连接就引发的事件被称为onopen。
消息
通常在服务器发送一些数据时发生消息事件。服务器发送给客户端的消息可以包括纯文本消息,二进制数据或图像。无论何时发送数据,都会触发onmessage函数。
关闭
关闭事件标志着服务器和客户端之间通信的结束。在onclose事件的帮助下,可以关闭连接。在onclose事件的帮助下标记通信结束后,服务器和客户端之间无法进一步传输消息。关闭事件也可能由于连接不良而发生。
错误
某些错误的错误标记,在通信期间发生。它是在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,"手动关闭连接...");