WebSocket（WebSocket）

优质

小牛编辑

124浏览

2023-12-01

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

一旦与Web服务器建立Web Socket连接，就可以通过调用send()方法将数据从浏览器发送到服务器，并通过onmessage事件处理程序从服务器接收数据到浏览器。

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

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

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

WebSocket属性

以下是WebSocket对象的属性。假设我们如上所述创建了Socket对象 -

Sr.No.	属性和描述
1	Socket.readyState readonly属性readyState表示连接的状态。它可以具有以下值 - 值为0表示尚未建立连接。值为1表示建立连接并且可以进行通信。值为2表示连接正在进行结束握手。值3表示连接已关闭或无法打开。
2	Socket.bufferedAmount readonly属性bufferedAmount表示使用send（）方法排队的UTF-8文本的字节数。

Sr.No.

属性和描述

Socket.readyState

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

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

Socket.bufferedAmount

readonly属性bufferedAmount表示使用send（）方法排队的UTF-8文本的字节数。

WebSocket事件

以下是与WebSocket对象关联的事件。假设我们如上所述创建了Socket对象 -

事件	事件处理程序	描述
open	Socket.onopen	建立套接字连接时会发生此事件。
message	Socket.onmessage	客户端从服务器接收数据时会发生此事件。
error	Socket.onerror	当通信中出现任何错误时，会发生此事件。
close	Socket.onclose	连接关闭时会发生此事件。

WebSocket方法

以下是与WebSocket对象关联的方法。假设我们如上所述创建了Socket对象 -

Sr.No.	方法和描述
1	Socket.send() 发送（数据）方法使用连接发送数据。
2	Socket.close() close（）方法将用于终止任何现有连接。

Sr.No.

方法和描述

Socket.send()

发送（数据）方法使用连接发送数据。

Socket.close()

close（）方法将用于终止任何现有连接。

WebSocket示例

WebSocket是客户端和服务器之间的标准双向TCP套接字。套接字以HTTP连接开始，然后在HTTP握手后“升级”到TCP套接字。握手后，任何一方都可以发送数据。

客户端HTML和JavaScript代码

在编写本教程时，只有少数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!");
               // Let us open a web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
               ws.onopen = function() {
                  // Web Socket is connected, send data using 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 is closed.
                  alert("Connection is closed..."); 
               };
            } else {
               // The browser doesn't support 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提供Web Socket扩展，并按照这些步骤安装它。

解压缩并解压缩下载的文件。
进入pywebsocket-xxx/src/目录。
$ python setup.py构建
$ sudo python setup.py install
然后阅读文件 -
- $ pydoc mod_pywebsocket

这将把它安装到你的python环境中。

启动服务器

转到pywebsocket-xxx/src/mod_pywebsocket文件夹并运行以下命令 -

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

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

现在使用Chrome浏览器打开您在开头创建的html文件。如果您的浏览器支持WebSocket（），那么您将获得警报，指示您的浏览器支持WebSocket，最后当您单击“运行WebSocket”时，您将收到服务器脚本发送的Goodbye消息。