HTML5 WebSockets 基础使用教程

资讯频道 → Web前端

28顶
0踩

2010-08-11 10:57 by 副主编 just_cool 评论(13) 有24396人浏览

Socket HTML5

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
2
3
4

public function __construct($host='localhost',$port=8000,$max=100)
{
$this->createSocket($host,$port);
}

　　浏览文件并在适当情况下进行更改。

第三步：开始创建客户端

　　下面来创建基本模板，这是我的client.php文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<title>WebSockets Client</title>

</head>
<body>
<div id="wrapper">

<div id="container">

<h1>WebSockets Client</h1>

<div id="chatLog">

</div>
<p id="examples">e.g. try 'hi', 'name', 'age', 'today'</p>

<input id="text" type="text" />
<button id="disconnect">Disconnect</button>

</div>

</div>
</body>
</html>

　　我们已经创建里基本模板：一个chat log容器，一个input输入框和一个断开连接的按钮。

第四步：添加一些CSS

　　没什么花俏代码，只是处理一下标签的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

body {
font-family:Arial, Helvetica, sans-serif;
}
#container{
border:5px solid grey;
width:800px;
margin:0 auto;
padding:10px;
}
#chatLog{
padding:5px;
border:1px solid black;
}
#chatLog p {
margin:0;
}
.event {
color:#999;
}
.warning{
font-weight:bold;
color:#CCC;
}

第五步：WebSocket事件

首先让我们尝试并理解WebSocket事件的概念：

WebSocket事件：
我们将使用三个WebSocket事件：
onopen: 当接口打开时
onmessage: 当收到信息时
onclose: 当接口关闭时

我们如何来实现呢？
首先创建WebSocket对象

1	var socket = new WebSocket("ws://localhost:8000/socket/server/startDaemon.php");

然后向下面这样检测事件

1
2
3

socket.onopen = function(){
alert("Socket has been opened!");
}

当我们收到信息时这样做：

1
2
3

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

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

第六步：JavaScript

　　首先我们将代码放到jQuery 的 document.ready函数中，然后我们还要检查用户的浏览器是否支持WebSocket。如果不支持，我们就添加一个链向Chrome浏览器页面的链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

　　如你所见，如果用户浏览器支持WebSocket，我们将执行connect()函数。这里是核心功能，我们将开始创建open、close和receive事件。

我们将在我们的服务器定义URL。

1 2	var socket; 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

　　message()函数很简单, 它将我们想展现给用户的文本填入chat log容器内。我们在socket事件函数中为段落(<p>)标签创建适当的class，我们在message函数中只有一个段落结束标签。

1
2
3

function message(msg){
$('#chatLog').append(msg+'</p>');
}

目前的成果

　　如果你已按上面教程按部就班的做的话，很好，我们已经创建了 HTML/CSS 模板、创建并建立Websocket连接、通过创建连接保持用户的进展更新。

第七步：发送数据

　　现在我们已经有了提交按钮，但我们还需要监听用户按下键盘的事件，并运行send函数，下面的’13′便是回车键对应的ASCII码。

1
2
3
4
5

$('#text').keypress(function(event) {
if (event.keyCode == '13') {
send();
}
});

下面是send()函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

下面我们需要：

1	socket.send();

　　那些额外的代码做了以下工作：检测用户是否什么都没输入却仍点击返回、清空input输入框、执行message()函数。

关闭Socket

　　关闭Socket操作相当简单，添加对断开连接按钮的click事件监听就可以。

1
2
3

$('#disconnect').click(function(){
socket.close();
});

完整JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

$(document).ready(function() {

if(!("WebSocket" in window)){
$('#chatLog, input, button, #examples').fadeOut("fast");
$('<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');
}else{
//The user has WebSockets

connect();

function connect(){
var socket;
var host = "ws://localhost:8000/socket/server/startDaemon.php";

try{
var socket = new WebSocket(host);

message('<p class="event">Socket Status: '+socket.readyState);

socket.onopen = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (open)');
}

socket.onmessage = function(msg){
message('<p class="message">Received: '+msg.data);
}

socket.onclose = function(){
message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
}

} catch(exception){
message('<p>Error'+exception);
}

function send(){
var text = $('#text').val();

if(text==""){
message('<p class="warning">Please enter a message');
return ;
}
try{
socket.send(text);
message('<p class="event">Sent: '+text)

} catch(exception){
message('<p class="warning">');
}
$('#text').val("");
}

function message(msg){
$('#chatLog').append(msg+'</p>');
}

$('#text').keypress(function(event) {
if (event.keyCode == '13') {
send();
}
});

$('#disconnect').click(function(){
socket.close();
});

}//End connect

}//End else

});

第九步：运行WebSocket服务器

我们要输入一些命令行，XAMPP提供了比较方便的shell选项。点击XAMPP控制面板的’shell’按钮并输入：
php -q path\to\server.php
现在你已经运行了WebSocket服务器！

大功告成！

　　当页面读取后，将尝试创建一个WebSocket连接，然后用户可以输入信息并从服务器接收信息。

感谢大家耐心阅读本教程，希望你能从中学到有用的知识，HTML5 WebSocket的确令人兴奋不已！大家可以通过The WebSocket API了解HTML5 WebSocket的最新动态。

点击这里下载源文件

查看图片附件

来自: 彬Go

分享到：

28
顶

0
踩

评论共 13 条请登录后发表评论

13 楼 jallin 2010-08-15 23:33

学习了

12 楼 hantsy 2010-08-12 17:06

11 楼 takuma888 2010-08-12 16:22

虽然不是新闻，普及一下也是好的。

10 楼 fireflyman 2010-08-12 14:07

mark +1

9 楼 Hooopo 2010-08-12 13:56

mark.

8 楼 netfishx 2010-08-12 13:22

这个也算新闻？？？

7 楼 rmn190 2010-08-12 11:37

push 技术，不错， JavaEE6中刚引进Push相关的API吧

6 楼 by5739 2010-08-12 10:19

好..非常好....好技术好多放出来...醒目...哈...查看方便啊

5 楼 rainsilence 2010-08-12 10:06

关键在服务器端

4 楼 sentryward 2010-08-12 09:03

这个吗，技术新闻，你们懂的。

3 楼 lokinell2006 2010-08-12 09:00

这个绝对不是新闻！不过楼主的文章写的不错。

2 楼 songlixiao 2010-08-12 08:59

是啊.这个.........为什么叫新闻阿？

1 楼 neora 2010-08-11 17:46

这个.........为什么叫新闻阿？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

HTML5WebSockets基础使用教程

WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持WebSockets了。WebSockets可以替代LongPolling(PHP服务端推送...

java岗面试考察你对servlet 以及jsp的理解

很多初学者包括我做Java开发一上来就是直接使用框架，当然框架的作用就是简化Java开发，尤其是现在最流行的springboot，大大简化了我们的工作量，我就是这样走过这一个坑，所以希望大家不要和我一样走弯路。基础真的很重要，如果你能明白spring容器的工作原理，它能解决什么问题，那么你熟练使用spring自然是水到渠成，所以大家在使用spring之前必须要明白servlet以及jsp的工作原理

HTML5 WebSockets 基础使用教程加示例

HTML5 WebSockets 基础使用教程和相关的示例代码

HTML5 WebSockets基础使用教程

[转]HTML5 WebSockets 基础使用教程

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的服务器端运行WebSocket，创建客户端并通过WebSockets协议发送和接收服务器端信息。 ...

转：HTML5 WebSockets 基础使用教程

HTML5之中一个很酷的新特性就是WebSockets，它可以让我们无需AJAX请求即可与服务器端对话。今天彬Go将让大家通过Php环境的...《关于HTML 5 canvas 的基础教程》《让所有IE支持HTML5的解决方案》《一起感受HTML5和CS

html5 node.js 实例,HTML5 WebSockets+NodeJs 实例教程

HTML 5 中WebSockets是极其重要的部分,它的一个好处之一是减少了不必要的网络流量。它主要是用于在客户机和服务器之间建立单一的双向连接。这意味着客户只需要发送一个请求到服务端，那么服务端则会进行处理，处理好...

使用Nginx做WebSockets代理教程

作为HTML5规范的一部分，WebSockets简化了开发Web实时通信程序的难度。目前主流的浏览器都支持WebSockets，包括火狐、IE、Chrome、Safari以及Opera等，而且，越来越多的服务器应用框架也开始支持WebSockets。要 ...

在python中使用websockets

Websockets使用双向通信，并且在客户端或服务器决定终止连接之前，连接不会中断。 ...

基于FPGA的四相八拍步进电机控制系统设计：集成交付、正反转、加速减速及调速功能

内容概要：本文详细介绍了基于FPGA的四相八拍步进电机控制系统的开发过程。主要内容包括：1. 使用VHDL和Verilog编写LED显示屏驱动代码，用于显示角度、学号和姓名等信息；2. 实现步进电机的正反转控制，通过状态机管理相序变化；3. 开发加速减速控制模块，确保电机启动和停止时的平稳性；4. 设计调速功能，通过调节脉冲频率实现速度控制。此外，文中还讨论了调试过程中遇到的问题及其解决方案。适合人群：对FPGA开发和步进电机控制感兴趣的电子工程师、嵌入式系统开发者以及相关专业的学生。使用场景及目标：适用于需要高精度运动控制的应用场合，如工业自动化、机器人技术和精密仪器等领域。目标是帮助读者掌握FPGA控制步进电机的基本原理和技术细节。其他说明：文中提供了详细的代码片段和调试经验分享，有助于读者更好地理解和应用所学知识。同时，作者还提到了一些实用技巧，如通过PWM调节实现多级变速，以及如何避免步进电机的共振问题。

Android开发：基于SQLite的日历备忘录记事本项目详解与实现

内容概要：本文详细介绍了基于Android Studio开发的日历备忘录记事本项目，涵盖日历查看、添加备忘录、闹钟提醒和删除备忘录等功能。项目使用SQLite数据库进行数据存储，通过CalendarView、EditText、Button等控件实现用户交互，并利用AlarmManager和PendingIntent实现闹钟提醒功能。此外，项目还包括数据库的设计与管理，如创建DatabaseHelper类来管理数据库操作，确保数据的安全性和完整性。文章还探讨了一些常见的开发技巧和注意事项，如时间戳的使用、手势监听的实现等。适用人群：适用于初学者和有一定经验的Android开发者，尤其是希望深入了解Android开发基础知识和技术细节的人群。使用场景及目标：该项目旨在帮助开发者掌握Android开发的基本技能，包括UI设计、数据库操作、闹钟提醒机制等。通过实际项目练习，开发者能够更好地理解和应用这些技术，提升自己的开发能力。其他说明：文中提到一些进阶任务，如用Room替换SQLite、增加分类标签、实现云端同步等，鼓励开发者进一步扩展和优化项目。同时，项目源码公开，便于学习和参考。

Matlab实现基于SVM-Adaboost支持向量机结合Adaboost集成学习时间序列预测的详细项目实例（含完整的程序，GUI设计和代码详解）

内容概要：本文档详细介绍了一个基于SVM（支持向量机）和Adaboost集成学习的时间序列预测项目。该项目旨在通过结合这两种强大算法，提升时间序列预测的准确性和稳定性。文档涵盖了项目的背景、目标、挑战及其解决方案，重点介绍了模型架构、数据预处理、特征选择、SVM训练、Adaboost集成、预测与误差修正等环节。此外，文档还探讨了模型在金融市场、气象、能源需求、交通流量和医疗健康等多个领域的应用潜力，并提出了未来改进的方向，如引入深度学习、多任务学习、联邦学习等先进技术。适合人群：具备一定机器学习基础的研究人员和工程师，特别是那些从事时间序列预测工作的专业人士。使用场景及目标：①用于金融市场、气象、能源需求、交通流量和医疗健康等领域的复杂时间序列数据预测；②通过结合SVM和Adaboost，提升预测模型的准确性和稳定性；③处理噪声数据，降低计算复杂度，提高模型的泛化能力和实时预测能力。其他说明：文档不仅提供了详细的理论解释，还附有完整的Matlab代码示例和GUI设计指导，帮助读者理解和实践。此外，文档还讨论了模型的部署与应用，包括系统架构设计、实时数据流处理、可视化界面、GPU加速推理等方面的技术细节。

#游戏之追逐奶酪123

威纶通触摸屏配方管理系统解析：宏程序、数据结构与UI设计

内容概要：本文详细介绍了威纶通触摸屏配方管理系统的实现方法及其应用场景。首先，文章讲解了配方管理的基本概念和技术背景，强调了配方管理在工业自动化中的重要性。接着，通过具体的宏程序代码示例，展示了如何实现配方的保存、加载以及安全校验等功能。文中还提到配方数据结构的设计，如使用寄存器地址偏移来确保数据不冲突，并通过CSV文件格式方便地管理和维护配方数据。此外，文章深入探讨了UI设计方面的内容，包括动态图层技术和按钮交互效果的应用，使得用户界面更加友好和直观。最后，作者分享了一些实际项目中的经验和技巧，如文件操作的异常处理和宏指令调试方法。适合人群：从事工业自动化领域的工程师和技术人员，尤其是对触摸屏配方管理系统感兴趣的读者。使用场景及目标：适用于需要频繁切换设备参数的生产环境，如食品加工、注塑成型等行业。通过使用威纶通触摸屏配方管理系统，可以提高工作效率，减少人为错误，同时简化设备调试和维护流程。其他说明：附带的工具包提供了完整的宏指令注释版、图库资源和调试工具，帮助用户更好地理解和应用该系统。

张彩明-图形学简明教程配书资源

张彩明-图形学简明教程 PPT课件

计算机术语.pdf

基于改进粒子群算法的微电网多目标优化调度模型与算法分析

内容概要：本文详细介绍了利用改进粒子群算法（IPSO）进行微电网多目标优化调度的方法和技术。首先指出了传统粒子群算法（PSO）存在的局限性，如初始化随机性和易陷入局部最优等问题。接着提出了多种改进措施，包括混沌映射初始化、动态权重调整、自适应变异以及引入帕累托前沿机制等。文中通过具体的代码实例展示了这些改进的具体实现，并通过实验验证了改进后的算法在处理微电网优化调度问题时的有效性，尤其是在应对风光发电不确定性方面表现突出。此外，文章还讨论了实际应用场景中的约束处理方法，如功率平衡约束的修复策略，确保理论与实践相结合。适合人群：对智能优化算法及其在电力系统特别是微电网中的应用感兴趣的科研人员、工程师及研究生。使用场景及目标：适用于需要对微电网进行多目标优化调度的研究和工程项目，旨在提高微电网运行效率，降低成本并减少环境污染。通过学习本文提供的改进算法和技术手段，能够更好地理解和掌握如何针对特定业务场景定制化地改进经典优化算法。其他说明：文章不仅提供了详细的理论分析和算法改进思路，还包括了大量的代码片段和实验结果，有助于读者深入理解并快速应用于实际项目中。

28顶0踩