HTML5 Web Sockets通信

2016年06月07日 HTML 暂无评论 阅读 22 views 次

基础介绍

Web Sockets是HTML5提供的在Web应用程序中客户端与服务器端之间进行的非HTTP的通信机制。它实现了用HTTP不容易实现的服务器端的数据推送等智能通信技术。

使用Web Sockets API可以在服务器与客户端之间建立一个非HTTP的双向连接。这个连接是实时的,也是永久的,除非被显示关闭。这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户端的浏览器中,无须重新建立连接。只要客户端有一个被打开的socket(套接字)并且与服务器建立了连接,服务器就可以把数据推送到这个socket上,服务器不再需要轮询客户端的请求,从被动转为主动。

使用Web Sockets API

Web Sockets的API本身非常简单。将URL字符串作为参数,然后调用WebSocket对象的构造函数来建立与服务器之间的通信连接,例如:

Js代码  收藏代码
  1. var webSocket = new WebSocket("ws://localhost:8005/socket");

URL字符串必须以“ws”或“wss”(加密通信时)文字作为开头。这个URL字符串被设定好之后,在JavaScript脚本中可以通过访问WebSocket对象的url属性来重新获取。通信连接建立好之后,就可以进行客户端与服务器端的双向通信了。使用WebSocket对象的send()方法对服务器发送数据,只能发送文本数据,但是可以使用JSON对象把任何JavaScript对象转换成文本数据后进行发送。使用send()方法的代码如下:

Js代码  收藏代码
  1. webSocket.send("data");

通过获取message事件句柄来接收服务器传过来的数据,示例如下:

Js代码  收藏代码
  1. webSocket.addEventListent("message"function(event) {
  2.     var data = event.data;
  3.     // 其他处理代码。
  4. }, false);

通过获取open事件句柄来监听socket的打开事件,示例如下:

Js代码  收藏代码
  1. webSocket.addEventListener("open"function(event) {
  2.     // 开始通信时的处理。
  3. }, false);

通过获取close事件句柄来监听socket的关闭事件,示例如下:

Js代码  收藏代码
  1. webSocket.addEventListener("close"function(event) {
  2.     // 通信结束时的处理。
  3. }, false);

通过获取close()方法来关闭socket,切断通信连接,示例如下:

Js代码  收藏代码
  1. webSocket.close();

另外,可以通过读取readyState的属性值来获取WebSocket对象的状态。readyState属性存在以下几种属性值:

发送对象

使用WebSockets API,不仅可以发送文本数据,而且可以JSON对象来发送一切JavaScript中的对象。使用JSON对象的关键是使用它的两个方法——JSON.parse()方法与JSON.stringify()方法,其中JSON.stringift()方法把JavaScript对象转换成为文本数据,JSON.parse()方法将文本数据转回为JavaScript对象。示例如下:

Js代码  收藏代码
  1. var host = "ws://localhost:8005/socket";
  2. var webSocket = new WebSocket(host);
  3. var userName, userAge, successFlag, currentTime;
  4. webSocket.addEventListener("message"function(event) {
  5.     var DataBase = JSON.parse(event.data);
  6.     userName = DataBase.userName;
  7.     userAge = DataBase.userAge;
  8.     successFlag = false;
  9.     if(DataBase.DataType == "SQLServer") {
  10.         successFlag = InsertSQLData();
  11.     } else if(DataBase.DataType == "ORACLE") {
  12.         successFlag = InsertORACLEData();
  13.     }
  14.     currentTime = new Date();
  15.     webSocket.send(JSON.stringify({
  16.         result: successFlag,
  17.         time: currentTime
  18.     }));
  19. }, false);

给我留言

您必须 登录 才能发表留言!