HTML5WebSockets基础使⽤教程
摘要：HTML5之中⼀个很酷的新特性就是WebSockets，它可以让我们⽆需AJAX请求即可与服务器端对话。今天彬Go将让⼤家通过Php环境的服务器端运⾏WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。
什么是WebSockets？
  WebSockets是在⼀个(TCP)接⼝进⾏双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，⽬前为⽌，Chrome和Safari的最新版本浏览器已经⽀持WebSockets了。
WebSockets将会替代什么？
  WebSockets可以替代Long Polling(PHP服务端推送技术)，这是⼀个有趣的概念。客户端发送⼀个请求到服务器，现在，服务器端并不会响应还没准备好的数据，它会保持连接的打开状态直到最新的数据准备就绪发送，之后客户端收到数据，然后发送另⼀个请求。这有它的好处：减少任⼀连接的延迟，当⼀个连接已经打开时就不需要创建另⼀个新的连接。但是Long-Polling并不是什么花俏技术，他仍有可能发⽣请求暂停，因此会需要建⽴新的连接。
  ⼀些AJAX应⽤使⽤上述技术-这经常是归因于低资源利⽤。
  试想⼀下，如果服务器在早晨会⾃启动并发送数据到那些希望接收⽽不⽤提前建⽴⼀些连接端⼝的客户端，这是⼀件多棒的事情啊！欢迎来到PUSH技术的世界！
第⼀步：搞定WebSocket服务器　
　这篇教程会把更多的精⼒放在客户端的创建⽽不是服务器端的执⾏等操作。
  我使⽤基于windows 7的XAMPP来实现本地运⾏PHP。phpwebsockets是PHP WebSocket服务器。(以我的经验这个版本存在⼀些⼩问题，我已对它做了些修改并上传源⽂件共享给⼤家)下⾯的这些不同版本也可以实现WebSocket，如果某个不能⽤，你可以试试其它版本或者继续看下⾯的教程。
  (Java)
  (ruby)
  (node.js)
启动Apache服务器
第⼆步：修改URLs和端⼝
根据你之前的安装修改服务器，下⾯是setup.class.php中的例⼦：
1 public function _construct($host='localhost',$port=8000,$max=100)
2 {
3    $this->createSocket($host,$port);
4 }
浏览⽂件并在适当情况下进⾏更改。
第三步：开始创建客户端
下⾯来创建基本模板，这是我的client.php⽂件：
1 <!DOCTYPE html>
2  <html>
3  <head>
4  <script src="leapis/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
5
6  <title>WebSockets Client</title>
7
8  </head>
9  <body>
10  <div id="wrapper">
11
12    <div id="container">
13
14        <h1>WebSockets Client</h1>
15
16        <div id="chatLog">
17
18        </div><!-- #chatLog -->
19        <p id="examples"& try 'hi', 'name', 'age', 'today'</p>
20
21        <input id="text" type="text" />
22        <button id="disconnect">Disconnect</button>
23
24    </div><!-- #container -->
25
26  </div>
27  </body>
28  </html>
我们已经创建⾥基本模板：⼀个chat log容器，⼀个input输⼊框和⼀个断开连接的按钮。
第四步：添加⼀些CSS
  没什么花俏代码，只是处理⼀下标签的样式。
1 body {
2    font-family:Arial, Helvetica, sans-serif;
3  }
4 #container{
5    border:5px solid grey;
6    width:800px;
7    margin:0 auto;
8    padding:10px;
9  }
10 #chatLog{
11    padding:5px;
12    border:1px solid black;
13  }
14 #chatLog p {
15    margin:0;
16  }
17 .event {
18    color:#999;
19  }
20 .warning{
21    font-weight:bold;
22    color:#CCC;
23  }
第五步：WebSocket事件
  ⾸先让我们尝试并理解WebSocket事件的概念：
WebSocket事件：
我们将使⽤三个WebSocket事件：
onopen: 当接⼝打开时
onmessage: 当收到信息时
onclose: 当接⼝关闭时
我们如何来实现呢？
  ⾸先创建WebSocket对象
1 var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");
然后向下⾯这样检测事件
ssage = function(msg){
2    alert(msg); //Awesome!
3  }
3 }
但我们还是尽量避免使⽤alert，现在我们可以把我们学的东西整合到客户端页⾯中了。
第六步：JavaScript
  ⾸先我们将代码放到的 ady函数中，然后我们还要检查⽤户的浏览器是否⽀持WebSocket。如果不⽀持，我们就添加⼀个链向Chrome浏览器页⾯的链接。
1 $(document).ready(function() {
2    if(!("WebSocket" in window)){
3        $('#chatLog, input, button, #examples').fadeOut("fast");
4        $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="le/chrome">Google Chrome</a>?</p>').appendTo('#container');
5    }else{
6
7    //The user has WebSockets
8
9    connect();
10
11    function connect(){
12        //the connect function code is below
13
14    }
15 });
如你所见，如果⽤户浏览器⽀持WebSocket，我们将执⾏connect()函数。这⾥是核⼼功能，我们将开始创建open、close和receive事件。
try catch的使用方法
  我们将在我们的服务器定义URL。
1 var socket;
2  var host = "ws://localhost:8000/socket/server/startDaemon.php";
你可能会发现URL中怎么没有http？恩，是的，这是⼀个WebSocket URL，使⽤了不同的协议。下⾯是URL分解图⽰：
  下⾯让我们继续完成connect()函数，我们将代码放⼊try/catch块，这样如果代码出现问题，我们能让⽤户知道。我们创建WebSocket，并将信息传递到message()函数，之后会做讲解。我们创建我们的onopen、onmessage和onclose函数.需要注意的是我们为⽤户提供了端⼝状态，这并不是必需的，但我们把它放进来主要是为了⽅便调试。
CONNECTING = 0
OPEN = 1
CLOSED = 2
1 function connect(){
2    try{
3
4    var socket;
5    var host = "ws://localhost:8000/socket/server/startDaemon.php";
6    var socket = new WebSocket(host);
7
8        message('<p class="event">Socket Status: '+adyState);
9
10        pen = function(){
11              message('<p class="event">Socket Status: '+adyState+' (open)');
12        }
13
14        ssage = function(msg){
15              message('<p class="message">Received: '+msg.data);
16        }
17
18        lose = function(){
19              message('<p class="event">Socket Status: '+adyState+' (Closed)');
20        }
21
22    } catch(exception){
23          message('<p>Error'+exception);
24    }
25 }
message()函数很简单，它将我们想展现给⽤户的⽂本填⼊chat log容器内。我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有⼀个段落结束标签。
1 function message(msg){
2    $('#chatLog').append(msg+'</p>');
3 }
⽬前的成果
如果你已按上⾯教程按部就班的做的话，很好，我们已经创建了 HTML/CSS 模板、创建并建⽴Websocket连接、通过创建连接保持⽤户的进展更新。
第七步：发送数据
  现在我们已经有了提交按钮，但我们还需要监听⽤户按下键盘的事件，并运⾏send函数，下⾯的’13′便是回车键对应的ASCII码。
1 $('#text').keypress(function(event) {
2    if (event.keyCode == '13') {
3        send();
4    }
5 });
下⾯是send()函数：
1 function send(){
2
3    var text = $('#text').val();
4    if(text==""){
5        message('<p class="warning">Please enter a message');
6        return ;
7    }
8    try{
9        socket.send(text);
10        message('<p class="event">Sent: '+text)
11    } catch(exception){
12    message('<p class="warning"> Error:' + exception);
13    }
14
15    $('#text').val("");
16
17 }
下⾯我们需要：
1 socket.send();
那些额外的代码做了以下⼯作：检测⽤户是否什么都没输⼊却仍点击返回、清空input输⼊框、执⾏message()函数。
关闭Socket
关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。
1 $('#disconnect').click(function(){
2    socket.close();
3 });
完整JavaScript代码
1 $(document).ready(function() {
2
3  if(!("WebSocket" in window)){
4  $('#chatLog, input, button, #examples').fadeOut("fast");
5  $('<p>Oh no, you need a browser that supports WebSockets. How about <a href="le/chrome">Google Chrome</a>?</p>').appendTo('#container');
6  }else{
7      //The user has WebSockets
8
9      connect();
10
11      function connect(){
12          var socket;
13          var host = "ws://localhost:8000/socket/server/startDaemon.php";
14
15          try{
16              var socket = new WebSocket(host);
17
18              message('<p class="event">Socket Status: '+adyState);
19
20              pen = function(){
21                  message('<p class="event">Socket Status: '+adyState+' (open)');
22              }
23
24              ssage = function(msg){
25                  message('<p class="message">Received: '+msg.data);
26              }
27
28              lose = function(){
29                message('<p class="event">Socket Status: '+adyState+' (Closed)');
30              }
31
32          } catch(exception){
33              message('<p>Error'+exception);
34          }
35
36          function send(){
37              var text = $('#text').val();
38
39              if(text==""){
40                  message('<p class="warning">Please enter a message');
41                  return ;
42              }
43              try{
44                  socket.send(text);
45                  message('<p class="event">Sent: '+text)
46
47              } catch(exception){
48                  message('<p class="warning">');
49              }
50              $('#text').val("");
51          }
52
53          function message(msg){
54            $('#chatLog').append(msg+'</p>');
55          }
56
57          $('#text').keypress(function(event) {
58              if (event.keyCode == '13') {
59                send();
60              }
61          });
62
63          $('#disconnect').click(function(){
64              socket.close();
65          });
66
67      }//End connect
68
69  }//End else
70
71 });
第九步：运⾏WebSocket服务器
  我们要输⼊⼀些命令⾏，XAMPP提供了⽐较⽅便的shell选项。点击XAMPP控制⾯板的’shell’按钮并输⼊：php -q path\to\server.php现在你已经运⾏了WebSocket服务器！
⼤功告成！
  当页⾯读取后，将尝试创建⼀个WebSocket连接，然后⽤户可以输⼊信息并从服务器接收信息。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。