基础介绍
Web Sockets是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。
使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的,也是永久的,除非被显示关闭。这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户端的浏览器中,无须重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立了连接,服务器就可以把数据推送到这个socket上,服务器不再需要轮询客户端的请求,从被动转为主动。
使用Web Sockets API
Web Sockets的API本身非常简单。将URL字符串作为参数,然后调用WebSocket对象的构造函数来建立与服务器之间的通信连接,例如:
var webSocket = new WebSocket("ws://localhost:8005/socket");
URL字符串必须以“ws”或“wss”(加密通信时)文字作为开头。这个URL字符串被设定好之后,在JavaScript脚本中可以通过访问WebSocket对象的url属性来重新获取。通信连接建立好之后,就可以进行客户端与服务器端的双向通信了。使用WebSocket对象的send()方法对服务器发送数据,只能发送文本数据,但是可以使用JSON对象把任何JavaScript对象转换成文本数据后进行发送。使用send()方法的代码如下:
webSocket.send("data");
通过获取message事件句柄来接收服务器传过来的数据,示例如下:
webSocket.addEventListent("message", function(event) { var data = event.data; // 其他处理代码。 }, false);
通过获取open事件句柄来监听socket的打开事件,示例如下:
webSocket.addEventListener("open", function(event) { // 开始通信时的处理。 }, false);
通过获取close事件句柄来监听socket的关闭事件,示例如下:
webSocket.addEventListener("close", function(event) { // 通信结束时的处理。 }, false);
通过获取close()方法来关闭socket,切断通信连接,示例如下:
webSocket.close();
另外,可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值:
- CONNECTING(数字值0):表示正在连接。
- OPEN(数字值1):表示已建立连接。
- CLOSING(数字值2):表示正在关闭连接。
- CLOSED(数字值3):表示已关闭连接。
发送对象
使用WebSockets API,不仅可以发送文本数据,而且可以JSON对象来发送一切JavaScript中的对象。使用JSON对象的关键是使用它的两个方法——JSON.parse()方法与JSON.stringify()方法,其中JSON.stringift()方法把JavaScript对象转换成为文本数据,JSON.parse()方法将文本数据转回为JavaScript对象。示例如下:
var host = "ws://localhost:8005/socket"; var webSocket = new WebSocket(host); var userName, userAge, successFlag, currentTime; webSocket.addEventListener("message", function(event) { var DataBase = JSON.parse(event.data); userName = DataBase.userName; userAge = DataBase.userAge; successFlag = false; if(DataBase.DataType == "SQLServer") { successFlag = InsertSQLData(); } else if(DataBase.DataType == "ORACLE") { successFlag = InsertORACLEData(); } currentTime = new Date(); webSocket.send(JSON.stringify({ result: successFlag, time: currentTime })); }, false);
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1673绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1050UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1286绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1671选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1378使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1457canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1462CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5405Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4607基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1974基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1817applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1517离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2553本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1563Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1213video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1717音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 896video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4932在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ... -
HTML5 文件API
2011-10-16 18:49 4965在HTML5中,提供了一个关于文件操作的文件API,通过使用这 ...
相关推荐
HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。使用web sockets api 可以让客户端与服务器端通过socket端口传递数据...
HTML5游戏编程核心技术与实战 《 HTML5游戏编程核心技术与实战》包含大量的游戏实例,并且将...1.2.6 Web sockets网络通信 1.2.7 Web Worker多线程 1.3 小结 第2章 Canvas绘图 2.1 基本知识 2.1.1 创建canvas 2.
Web Sockets 是用于 Web 应用程序的新一代双向通信技术,运行在单一套接字之上,它通过 JavaScript 接口暴漏在 HTML5 兼容的浏览器中。 一旦取得 Web 服务器上的 Web Socket 连接之后,就可以通过调用 send() 方法从...
html5的websocket 实现了双向通信,折腾了几天弄了个聊天室,分享给大家 <?php error_reporting(E_ALL); ob_implicit_flush(); $sk=new Sock('127.0.0.1',8000); $sk->run(); class Sock{ public $sockets; ...
1.4.2 代码声明块 1.4.3 ASP.NET控件 1.4.4 代码显示块 1.4.5 服务器端注释 1.4.6 服务器端包含指令 1.4.7 文本和HTML标记 1.5 小结 <br>第2章 用Web服务器控件建立表单 <br>...
本书结合大量实例,全面介绍了基于visual c#.net的网络编程,内容包括web forms、asp.net、tcp、udp端口通信、远程访问、msmq消息队列、电子邮作客户端系统、网络编程应用技巧与web services等。 本书所有的源...
1.4.2 代码声明块 1.4.3 ASP.NET控件 1.4.4 代码显示块 1.4.5 服务器端注释 1.4.6 服务器端包含指令 1.4.7 文本和HTML标记 1.5 小结 <br>第2章 用Web服务器控件建立表单 <br>...
1.4.2 代码声明块 1.4.3 ASP.NET控件 1.4.4 代码显示块 1.4.5 服务器端注释 1.4.6 服务器端包含指令 1.4.7 文本和HTML标记 1.5 小结 <br>第2章 用Web服务器控件建立表单 <br>...
1.4.2 代码声明块 1.4.3 ASP.NET控件 1.4.4 代码显示块 1.4.5 服务器端注释 1.4.6 服务器端包含指令 1.4.7 文本和HTML标记 1.5 小结 <br>第2章 用Web服务器控件建立表单 <br>...
1.4.2 代码声明块 1.4.3 ASP.NET控件 1.4.4 代码显示块 1.4.5 服务器端注释 1.4.6 服务器端包含指令 1.4.7 文本和HTML标记 1.5 小结 <br>第2章 用Web服务器控件建立表单 <br>...
高级ASP.NET页面开发 <br/>第5章 用用户控件创建自定义控件 <br/>5.1 用用户控件包含标准内容 5.2 显露用户控件中的属性和方法 5.3 显露用户控件中的Web控件 5.4 显露用户控件中的事件 ...
◆ 82.htm 用Sockets发送电子邮件 ◆ 83.htm 用VB 创 建 自 己 的 通 信 程 序 ◆ 84.htm 用VB5.0开发通信软件的技巧 ◆ 85.htm 用VB5开发IE ◆ 86.htm 用VB编写网络寻呼 ◆ 87.htm ...