Chinaunix首页 | 论坛 | 博客
  • 博客访问: 1621492
  • 博文数量: 1481
  • 博客积分: 26784
  • 博客等级: 上将
  • 技术积分: 17045
  • 用 户 组: 普通用户
  • 注册时间: 2011-07-12 09:22
文章分类

全部博文(1481)

文章存档

2014年(10)

2013年(353)

2012年(700)

2011年(418)

分类: HTML5

2013-01-25 09:36:16

HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。
Socket又称为套接字,是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常
情况下,Socket用于描述IP地址和端口,是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时,
通过通信中的字符句柄,实现不同端口对应不同应用服务功能。目前,大部分浏览器都支持HTML5中Socket API的运行。

WebSocket连接服务器和客户端,这个链接是一个实时的长连接,服务器端一旦与客户端建立了双向链接,
就可以将数据推送到Socket中,客户端只要有一个Socket绑定的地址和端口与服务器建立联系,就可以接收推送来的数据。

WebSocket API 的使用分为以下几个步骤:

步骤1、 创建连接,新建一个WebSocket对象十分的方便,代码如下:
var host = "ws://echo.websocket.org/";
var socket=new WebSocket(host);
注意:其中,URL必须以“ws”字符开头,剩余部分可以使用像HTTP地址一样来编写。该地址没有使用
HTTP协议写法,因为它的属性为WebSocket URL;URL必须由4个部分组成,分别是通信标记(ws)、主机名称(host),端口号(port)
及WebSocket Server.

步骤2,发送数据。当WebSocket对象与服务器建立联系后,使用如下代码发送数据:
socket.send(dataInfo);
注意:其中,objWs为新创建的WebSocket对象,send()方法中的dataInfo参数为字符类型,即只能使用文本数据或者将JSON对象转换成文本内容的数据格式。

步骤3,接收数据。客户端添加事件机制接收服务器发送来的数据,代码如下:
socket.onmessage=function(event){
    //弹出收到的信息
    alert(event.data);
    //其他代码
}
其中,通过回调函数中event对象的"data"属性来获取服务器端发送的数据内容,该内容可以是一个字符串或者JSON对象。

步骤4 状态标志。通过WebSocket对象的“readyState”属性记录连接过程中的状态值。
"readyState"属性是一个连接的状态标志,用于获取WebSocket对象在连接,打开,变比中和关闭时的状态。该状态标志共有4中属性值,如下表所示:


————————————————————————————————————
    属性值        属性常量        描述
————————————————————————————————————
    0        CONNECTING        连接尚未建立
        1        OPEN            WebSocket的链接已经建立
    2        CLOSING            连接正在关闭
    3        CLOSED            连接已经关闭或不可用
————————————————————————————————————

WebSocket对象在连接过程中,通过侦测这个状态标志的变化,可以获取服务器端与客户端连接的状态,并将连接状态已状态码形式返回给客户端。

步骤5 关闭socket连接。

socket.close();

————————————————————————————————————————————————————————————————
在实际应用中,socket服务器端的代码可以是Python,node.js,java,php。在这里我可以使用网站提供的,socket
服务端。协议地址为:ws://echo.websocket.org/
完整代码如下:
————————————————————————————————————————————————————————————————


Jack张WebSocket实例











————————————————————————————————————————————————————————————————

如果你通过浏览器浏览该网页看到如下效果:


说明你已经成功连接上socket服务端。

在输入框中输入“Jack's socket test”,如果能看到如下效果,



恭喜你,你的socket测试成功啦。
socket实例代码

有兴趣的兄弟可以自己写一个php的socket服务器端进行测试,
我在网上为大家找到了一个完整的PHP环境的websocket聊天实例。如果您感兴趣可以下载测试(供参考)。
原文地址:
阅读(1713) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~