HTML5 WebSockets 基础使用教程

摘要：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，如果某个不能用，你可以试试其它版本或者继续看下面的教程。
　　jWebSocket (Java)
　　web-socket-ruby(ruby)
　　Socket IO-node (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="http://ajax.googleapis.com/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">e.g. 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");

然后向下面这样检测事件

1 socket.onmessage = function(msg){
2     alert(msg); //Awesome!
3  }

3 }

但我们还是尽量避免使用alert，现在我们可以把我们学的东西整合到客户端页面中了。

第六步：JavaScript
　　首先我们将代码放到jQuery的 document.ready函数中，然后我们还要检查用户的浏览器是否支持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="http://www.google.com/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事件。
　　我们将在我们的服务器定义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: '+socket.readyState);  9
10         socket.onopen = function(){
11              message('<p class="event">Socket Status: '+socket.readyState+' (open)');
12         }
13
14         socket.onmessage = function(msg){
15              message('<p class="message">Received: '+msg.data);
16         }
17
18         socket.onclose = function(){
19              message('<p class="event">Socket Status: '+socket.readyState+' (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="http://www.google.com/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: '+socket.readyState);
19
20               socket.onopen = function(){
21                  message('<p class="event">Socket Status: '+socket.readyState+' (open)');
22               }
23
24               socket.onmessage = function(msg){
25                  message('<p class="message">Received: '+msg.data);
26               }
27
28               socket.onclose = function(){
29                 message('<p class="event">Socket Status: '+socket.readyState+' (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连接，然后用户可以输入信息并从服务器接收信息。

HTML5 WebSockets 基础使用教程相关推荐

html5的基本工作原理,HTML5基础开发教程
HTML5基础开发教程编辑锁定讨论上传视频 <HTML5基础开发教程 >是2013年5月出版的图书.主要面向高等院校学生,以及没有开发经验或者仅有少量程序设计基础的读者,因此书中 ...
一个html基本写法,HTML5教程:HTML5的基础写法
HTML5教程:HTML5的基础写法对比一下XHTML 1.0 Transitional的规范,html5基本上没有XHTML 1.0 Transitional严格的要求,并且简化了很多东西. •文 ...
视频教程-HTML + CSS零基础经典教程系列-HTML5/CSS
HTML + CSS零基础经典教程系列全栈开发工程师,现职于北京一家学院的全栈教学主任. 8年前端开发经验.4年移动端开发经验.4年UI设计经验.3年一线教学经验. 精通Node.JS.PHP.Ja ...
【尚硅谷】Web前端零基础入门HTML5+CSS3基础教程
[尚硅谷]Web前端零基础入门HTML5+CSS3基础教程学习视频来源:哔哩哔哩弹幕网(https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from ...
《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
html5的canvas动画,Canvas HTML5简介 · Canvas动画教程
Ch1 HTML5简介前言今后的一个月内会连载详细的Canvas教程,从零基础开始,到Canvas API,再到基本动画与高级动画的实现,还会介绍视音频的处理.移动应用,最后如果有时间会扩展说一说 ...
HTML5游戏开发案例教程
学习本套HTML5游戏案例开发教程需要您有一定的HTML5.JS基础,如果您还没有学过HTML5和JS请您查看本店相关教程.如果您已经具备一定的开发基础,这些教程将有助于您快速入门HTML5游戏开发. ...
Python基础入门教程：Day21-30/Web前端概述
Python基础入门教程:Web前端概述说明:本文使用的部分插图来自 Jon Duckett 先生的*HTML and CSS: Design and Build Websites*一书,这是一本非 ...
HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
虚幻引擎虚拟现实开发基础学习教程
流派:电子学习| MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz 语言:英语+中英文字幕(根据原英文字幕机译更准确)|大小解压后:3.93 GB |时长:5h 15m 了 ...

HTML5 WebSockets 基础使用教程

HTML5 WebSockets 基础使用教程相关推荐

最新文章

热门文章