无涯教程-HTML5 - WebSocket

无涯教程
94 阅读3分钟

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文本的字节数。

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()方法将用于终止任何现有连接。

WebSocket示例

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

客户端JS代码

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

<!DOCTYPE HTML>

<html>
<head>


  </span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/javascript"</span><span class="tag">&gt;</span><span class="pln">
     </span><span class="kwd">function</span><span class="pln"> </span><span class="typ">WebSocketTest</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
        
        </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="str">"WebSocket"</span><span class="pln"> in window</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
           alert</span><span class="pun">(</span><span class="str">"WebSocket is supported by your Browser!"</span><span class="pun">);</span><span class="pln">
           
           </span><span class="com">//让我们打开WebSocket</span><span class="pln">
           </span><span class="kwd">var</span><span class="pln"> ws</span><span class="pun">=</span><span class="kwd">new</span><span class="pln"> </span><span class="typ">WebSocket</span><span class="pun">(</span><span class="str">"ws://localhost:9998/echo"</span><span class="pun">);</span><span class="pln">
			
           ws</span><span class="pun">.</span><span class="pln">onopen</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
              
              </span><span class="com">//Web Socket 已连接，使用 send() 发送数据</span><span class="pln">
              ws</span><span class="pun">.</span><span class="pln">send</span><span class="pun">(</span><span class="str">"Message to send"</span><span class="pun">);</span><span class="pln">
              alert</span><span class="pun">(</span><span class="str">"Message is sent..."</span><span class="pun">);</span><span class="pln">
           </span><span class="pun">};</span><span class="pln">
			
           ws</span><span class="pun">.</span><span class="pln">onmessage</span><span class="pun">=</span><span class="kwd">function</span><span class="pln"> </span><span class="pun">(</span><span class="pln">evt</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> 
              </span><span class="kwd">var</span><span class="pln"> received_msg</span><span class="pun">=</span><span class="pln">evt</span><span class="pun">.</span><span class="pln">data</span><span class="pun">;</span><span class="pln">
              alert</span><span class="pun">(</span><span class="str">"Message is received..."</span><span class="pun">);</span><span class="pln">
           </span><span class="pun">};</span><span class="pln">
			
           ws</span><span class="pun">.</span><span class="pln">onclose</span><span class="pun">=</span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> 
              
              </span><span class="com">//websocket 已关闭。</span><span class="pln">
              alert</span><span class="pun">(</span><span class="str">"Connection is closed..."</span><span class="pun">);</span><span class="pln"> 
           </span><span class="pun">};</span><span class="pln">
        </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
          
           </span><span class="com">//浏览器不支持 WebSocket</span><span class="pln">
           alert</span><span class="pun">(</span><span class="str">"WebSocket NOT supported by your Browser!"</span><span class="pun">);</span><span class="pln">
        </span><span class="pun">}</span><span class="pln">
     </span><span class="pun">}</span><span class="pln">
  </span><span class="tag">&lt;/script&gt;</span><span class="pln">
	



</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"消息。

参考链接

www.learnfk.com/html5/html5…

avatar
文章
阅读
粉丝