关注我们

HTML5 - WebSocket

WebSocket是用于Web应用程序的下一代双向通信技术，该技术在单个Socket上运行，并通过兼容HTML 5的浏览器中的JavaScript接口公开。

与Web服务器创建WebSocket连接后，您可以通过调用 send()方法将数据从浏览器发送到服务器，并通过 onmessage 从服务器到浏览器接收数据。

以下是创建新的WebSocket对象的API。

var Socket=new WebSocket(url, [protocal] );

在这里，第一个参数url指定要连接的URL。第二个属性protocol是可选的，如果存在，它指定服务器必须支持成功的连接的子协议。

WebSocket属性

以下是WebSocket对象的属性。

Sr.No.	Attribute & Remark
1	Socket.readyState 只读属性readyState表示连接状态。它可以具有以下值- 无涯教程网值为0表示尚未创建连接。值为1表示已创建连接并且可以进行通信。值为2表示连接正在通过关闭握手。值为3表示连接已关闭或无法打开。
2	Socket.bufferedAmount 只读属性bufferedAmount表示已使用send()方法排队的UTF-8文本的字节数。

Sr.No.

Attribute & Remark

Socket.readyState

只读属性readyState表示连接状态。它可以具有以下值-

无涯教程网

值为0表示尚未创建连接。
值为1表示已创建连接并且可以进行通信。
值为2表示连接正在通过关闭握手。
值为3表示连接已关闭或无法打开。

Socket.bufferedAmount

只读属性bufferedAmount表示已使用send()方法排队的UTF-8文本的字节数。

WebSocket事件

以下是与WebSocket对象关联的事件。

Event	Event Handler	Description
open	Socket.onopen	创建Socket连接时发生此事件。
message	Socket.onmessage	客户端从服务器接收数据时,将发生此事件。
error	Socket.onerror	通信中出现任何错误时,就会发生此事件。
close	Socket.onclose	关闭连接时会发生此事件。

WebSocket方法

以下是与WebSocket对象关联的方法。

Sr.No.	Method & Remark
1	Socket.send() send(data)方法使用连接传输数据。
2	Socket.close() close()方法将用于终止任何现有连接。

Sr.No.

Method & Remark

Socket.send()

send(data)方法使用连接传输数据。

Socket.close()

close()方法将用于终止任何现有连接。

WebSocket示例

WebSocket是客户端和服务器之间的标准双向TCPSocket。Socket从HTTP连接开始，然后在HTTP握手后"Upgrades"到TCPSocket。握手后，任何一方都可以发送数据。

客户端JS代码

在撰写本教程时，只有很少的Web浏览器支持WebSocket接口。您可以尝试以下示例使用最新版本的Chrome，Mozilla，Opera和Safari。

复制代码

<!DOCTYPE HTML>

<html>
   <head>
      
      <script type="text/javascript">
         function WebSocketTest() {
            
            if ("WebSocket" in window) {
               alert("WebSocket is supported by your Browser!");
               
               //让我们打开WebSocket
               var ws=new WebSocket("ws://localhost:9998/echo");
				
               ws.onopen=function() {
                  
                  //Web Socket 已连接，使用 send() 发送数据
                  ws.send("Message to send");
                  alert("Message is sent...");
               };
				
               ws.onmessage=function (evt) { 
                  var received_msg=evt.data;
                  alert("Message is received...");
               };
				
               ws.onclose=function() { 
                  
                  //websocket 已关闭。
                  alert("Connection is closed..."); 
               };
            } else {
              
               //浏览器不支持 WebSocket
               alert("WebSocket NOT supported by your Browser!");
            }
         }
      </script>
		
   </head>
   
   <body>
      <div id="sse">
         <a href="javascript:WebSocketTest()">Run WebSocket</a>
      </div>
      
   </body>
</html>

安装pywebsocket

在测试上述客户端程序之前,您需要一台支持WebSocket的服务器。从 pywebsocket 下载mod_pywebsocket-xxxtar.gz,旨在提供一个网站针对Apache HTTP Server的Socket扩展,请按照以下步骤进行安装。

解压缩并解压缩下载的文件。
进入 pywebsocket-x.x.x/src/目录。
$python setup.py build
$sudo python setup.py install

这会将其安装到您的python环境中。

启动服务器

转到 pywebsocket-x.x.x/src/mod_pywebsocket 文件夹，然后运行以下命令-

$sudo python standalone.py -p 9998 -w ../example/

这将启动服务器在端口9998上的侦听，并使用echo_wsh.py所在的-w选项指定的 handlers 目录。

现在，使用Chrome浏览器打开您开头创建的html文件。如果您的浏览器支持WebSocket，那么您将收到警报，表明您的浏览器支持WebSocket，最后，当您单击"Run Websocket"时，您将收到服务器脚本发送的"Goodbye"消息。

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

TensorFlow快速入门与实战 -〔彭靖田〕

Selenium自动化测试实战 -〔郭宏志〕

Linux内核技术实战课 -〔邵亚方〕

代码之丑 -〔郑晔〕

AI大模型企业应用实战 -〔蔡超〕

好记忆不如烂笔头。留下您的足迹吧 :)