既是安安

蝴蝶飞不过沧海,谁忍心责怪?

{既是安安}

WebSockets基础

网络套接字是下一代WEB应用程序双向通信技术,它是基于一个独立的socket并且需要客户端浏览器支持HTML5。

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据。

以下是创建一个新的WebSocket对象的API:

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

这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议。

WEB Socket属性:

属性 说明
Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值:
  1. 一个0值表示该连接尚未建立。
  2. 值为1表示连接建立和沟通是可能的。
  3. 值为2表示连接是通过将结束握手。
  4. 值为3表示连接已关闭或无法打开。
Socket.bufferedAmount 读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。

WEB Socket事件:

事件 处理程序 说明
open Socket.onopen 此事件发生在套接字建立连接。
message Socket.onmessage 此事件发生时,客户端收到来自服务器的数据。
error Socket.onerror 此事件发生时有任何通信错误。
close Socket.onclose 此事件发生在连接关闭。

WEB Socket方法:

方法 说明
Socket.send() send(data)方法用来连接传输数据。
Socket.close() close()方法将被用于终止任何现有的连接。

WEB Socket例子:

 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5. function WebSocketTest()
  6. {
  7.   if ("WebSocket" in window)
  8.   {
  9.      alert("WebSocket is supported by your Browser!");
  10.      // Let us open a web socket
  11.      var ws = new WebSocket("ws://localhost:9998/echo");
  12.      ws.onopen = function()
  13.      {
  14.         // Web Socket is connected, send data using send()
  15.         ws.send("Message to send");
  16.         alert("Message is sent...");
  17.      };
  18.      ws.onmessage = function (evt) 
  19.      { 
  20.         var received_msg = evt.data;
  21.         alert("Message is received...");
  22.      };
  23.      ws.onclose = function()
  24.      { 
  25.         // websocket is closed.
  26.         alert("Connection is closed..."); 
  27.      };
  28.   }
  29.   else
  30.   {
  31.      // The browser doesn't support WebSocket
  32.      alert("WebSocket NOT supported by your Browser!");
  33.   }
  34. }
  35. </script>
  36. </head>
  37. <body>
  38. <div id="sse">
  39.    <a href="javascript:WebSocketTest()">Run WebSocket</a>
  40. </div>
  41. </body>
  42. </html>
[既是安安]博客 季氏安安

本文作者:季氏安安[既是安安]博客采用 BY-NC-SA 协议进行授权. 转载请保留此链接,谢谢。)

原文链接:http://www.jsann.com/post/html5_websocket.html

0 条留言

我要留言
(必填)
(必填,支持Gravatar)

RSS
  • 分类目录

  • 最近文章

  • 随机文章

  • 最近评论