HTML5 API:
1、文件 API (规范与本地文件进行交互的标准方法)
2、拖放 API (提供了直接支持拖放操作的API)
3、地理定位 (获取地理位置信息)
4、web 存储 (在本地存储用户的浏览数据)
5、Web SQL (在浏览器上模拟数据库,可以使用JS来操作SQL完成对数据的读写)
6、应用程序缓存 (创建 web 应用的离线版本。可以在没有网络连接的情况下进行访问。)
7、Web Sockets (在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。)
8、SSE (网页自动获取来自服务器的更新)
9、Web Workers (web worker 是运行在后台的 JavaScript,不会影响页面的性能)
......
7、Web Sockets (通信API)
内容目录:
- 跨文档消息传输
- Web Sockets通信
HTML5新增的与通信相关的两个功能—跨文档消息传输与使用Web Sockets API来通过sockets端口传递数据的功能。
使用跨文档消息传输功能,你可以在不同网页文档、不同端口、不同域之间进行消息的传递
使用Web Sockets API,你可以让客户端与服务器端通过sockets端口来传递数据,这样做的好处是可以实现数据推送技术—服务器端不再是被动地等待客户端发出的请求,只要客户端与服务器端建立了一次连接之后,服务器端就尅在需要的时候,主动地将数据推送到客户端,直到客户端显示关闭这个连接。
学习内容:
掌握跨文档信息传输的基本概念,掌握怎么实现不同页面,不同端口、不同域之间的消息传递
掌握Web Sockets通信技术的基本知识,能够在客户端与服务器端之间建立socket连接,并通过这个连接进行消息的传递,能够实现所有JavaScript对象的传递,能够让客户端显示关闭这个连
接。
跨文档信息传输
基础知识:
HTML5提供了在网页文档之间互相接收与发送信息的功能。使用这个功能,只要获取到网页所在窗口对象的实例,不仅同源(域+端口号)的web网页之家可以互相通信,甚至可以实现跨域通信。
首先,要想接收从其他的窗口那里发过来的信息,就必须对窗口对象的message事件进行监视,代码如下:
window.addEventListener(“message”, function(){…}, false);
使用window对象的postMessage(message, tragetOrigin);
第一个参数为发送的消息文本,但也可以是JavaScript对象(通过JSON转换对象为文本);第二个参数为接收消息的对象窗口的URL地址(例如http://localhost:8080/).可以在URL地址字符串中使用通配符 “*”指定全部地址,不过建议使用准确的URL地址,otherWindow为要发送窗口对象的引用,可以通过widnow.open返回该对象,或通过对window.frames数组指定序号(index)或名字的方式来返回单个frame所属的窗口对象。
示例:
主页面的代码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>aaa</title>
<style>
img{
width: 100px;
}
</style>
</head>
<body>
<h1>aaa</h1>
<h1>跨域通信示例</h1>
<iframe width="400" height="400" src="http://www.b.com" scrolling="no" frameborder="0" onload="hello()"></iframe>
</body>
<script>
window.addEventListener("message", function(ev){
console.log(ev.origin)
if(ev.origin != "http://www.b.com"){
return;
}
alert("从" + ev.origin + "那里传过来的消息是:、\n\"" + ev.data + "\"")
}, false)
function hello(){
var iframe = window.frames[0];
console.log(111, window)
console.log(222, iframe)
iframe.postMessage("hello world!!!", "http://www.b.com")
}
</script>
</html>
iframe子页面的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bbb</title>
<style>
img{
width: 100px;
}
body{
border: 2px solid red;
}
</style>
</head>
<body>
<h1>bbb</h1>
<div>留白div</div>
</body>
<script>
window.addEventListener("message", function(ev){
if(ev.origin != "http://www.a.com")
return;
document.querySelector("div").innerHTML = "从" + ev.origin + "那里传过来的消息。<br>\"" + ev.data + "\"";
ev.source.postMessage("你好这里是" + this.location, ev.origin);
console.log(ev.source)
}, false)
</script>
</html>
作为发起端,上面的形式是创建了一个iframe,我们也可以open一个新窗口(示例如下),往新窗口里发送数据,简单起见,我们每6秒钟发送一次,然后创建消息监听器,从目标窗口监听它反馈的信息。
//弹出一个新窗口
var domain = 'http://scritandstyle.com';
var myPopup = window.open(domain+'/windowPostMessageListener.html','myWindow');
//周期性的发送消息
setInterval(function(){
var message = 'Hello! The time is: ' + (new Date().getTime());
console.log('blog.local: sending message: ' + message);
//send the message and target URI
myPopup.postMessage(message,domain);
},6000);
//监听消息反馈
window.addEventListener('message',function(event) {
if(event.origin !== 'http://scriptandstyle.com') return;
console.log('received response: ',event.data);
},false);
window.addEventListener,但在IE里这样是不行的,因为IE使用window.attachEvent。如果你不想判断浏览器的类型,可以使用一些工具库,比如jQuery或Dojo。
总结上面的遇到的方法属性:
source – 消息源,消息的发送窗口/iframe。
origin – 消息源的URI(可能包含协议、域名和端口),用来验证数据源。
data – 发送方发送给接收方的数据。
这三个属性是消息传输中必须用到的数据。
ev.source ev.origin ev.data
var iframe = window.frames[0]; // iframe是消息源
iframe.postMessage("hello world!!!", "http://www.b.com")
var iframe = document.getElementById('myIFrame').contentWindow; // iframe是消息源
iframe.postMessage(message,domain);
var myPopup = window.open(domain + '/windowPostMessageListener.html','myWindow'); // myPopup是消息源
myPopup.postMessage(message,domain);
请记住,本节中所说的网页文档与网页文档之间的消息传输,针对的不仅仅是文本信息。如果使用JSON对象的stringify方法将JavaScript对象转成文本,使用JSON对象的parse方法将文本还原为JavaScript对象,则任何JavaScript对象都可以通过这种方式在网页文档与网页文档之间、端口与端口之间、域与域之间互相传递。
参考阅读 :
**window.postMessage的功能是允许程序员跨域在两个窗口/frames间 和 主线程与web worker线程间发送数据信息。!!!基本上,它就像是跨域的AJAX,但不是浏览器跟服务器之间交互,而是在两个客户端之间通信。!!!**除了IE6、IE7之外的所有浏览器都支持这个功能。HTML5里的window.postMessage:https://blog.csdn.net/yexudengzhidao/article/details/93472561
Web Sockets通信
Web Sockets通信的基本知识
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");
通过获取onmessage事件句柄来接收服务器传过来的数据,如下所示:
websocket.onmessage = function(event){
var data = event.data;
...
};
通过获取onopen事件句柄来监听socket的打开事件,如下所示:
websocket.onopen = function(event){
//开始通信时的处理
};
通过获取onclose事件句柄来监听socket的关闭时间,如下所示:
websocket.onclose = function(event){
//通信结束时的处理
};
通过close方法来关闭socket,切断通信连接,如下所示:
websocket.close();
另外,可以通过读取readyState的属性来。获取WebSocket对象的状态。readyState属性存在以下几种属性值:
CONNETING(数字值为0),表示正在连接。
OPEN(数字值为1),表示已建立连接
CLOSING(数字值为2),表示正在关闭连接
CLOSED(数字值为3),表示已关闭连接
Web Sockets API使用示例
下面是一个完整的使用Web Sockets的示例,在运行该示例之前,首先要在服务器端指定好它用的socket(套接字)应用程序,并且在服务器的配置文件中指定好运行该socket应用程序的主机
与接口,然后在运行配置好的服务器。(查看了很多,没看明白,我没配置好服务器端。 我安装的apache服务器,Web Sockets需要先开通WebSocket服务,有个讲的WebSocket很容易理解:
https://www.zhihu.com/question/20215561/answer/40316953 ,但是没有说配置服务器环境)下面的例子的服务器端就准备好了。
这里我们主要看一下怎样在客户端使用Web Sockets技术与服务器端进行连接并且收发信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Sockets 客户端示例</title>
</head>
<body>
<h1>ccc</h1>
<h3>Web Sockets 客户端示例</h3>
<div id="message"></div>
<p>请输入一些文字哦哦哦</p>
<input type="text" type="text">
<button id="connect" onclick="connect();">建立连接</button>
<button id="send" onclick="send();">发送数据</button>
<button id="disconnect" onclick="disconnect();">断开连接</button>
</body>
<script>
var webSocket;
function connect(){
try {
var readyState = new Array("正在连接", "已建立连接", "正在关闭连接", "已经关闭连接");
var host = "ws://crm.xcc.cn:80/websocket";
webSocket = new WebSocket(host);
var message = document.getElementById("message");
messsage.innerHTML += "<pSocket状态>" + readyState[webSocket.readyState] +"</p>";
webSocket.onopen = function(){
message.innerHTML = "<p>Socket状态:" + readyState[webSocket.readyState] + "</p>";
};
webSocket.onmessage = function(msg){
message.innerHTML += "<p>接收信息:" + msg.data + "</p>";
};
webSocket.onclose = function(){
message.innerHTML += "<p>Socket状态:" + readyState[webSocket.readyState] + "</p>";
};
} catch (exception) {
message.innerHTML += "<p>有错误发生</p>"
}
}
function send(){
var text = document.getElementById("text").value;
console.log(text)
var message = document.getElementById("message");
if(text == ""){
message.innerHTML += "<p>请输入一些文字</p>";
return;
}
try {
webSocket.send(text);
message.innerHTML += "<p>发送数据:" + text + "</p>";
} catch (exception) {
message.innerHTML += "<p>发送数据出错</p>";
}
document.getElementById("text").value = "";
}
function disconnect(){
webSocket.close();
}
</script>
</html>
使用WebSockets API,不仅可以发送文本数据,而且可以使用JSON对象发送一切JavaScript中的对象。使用JSON对象的关键是使用它的两个方法:JSON.pase()和JSON.stringify(),其中
JSON.stringify方法把JavaScript对象转换为文本数据。JSON.parse方法将文本数据转回为JavaScript对象。接下来,假定接收的对象为一个操纵数据库的对象,根据数据库对象的类型来选
择数据库,然后在数据库中插入接收的数据,最后把插入结果与时间作为对象重新使用WebSocket对象进行返回。
<script>
var host = "ws://localhost:8005/socket";
var webSocket = new WebSocket(host);
var userName;
var userAge;
var successFlag;
var currentTime;
webSocket.onmessage = function(event){
var DataBase = JSON.parse(event.data);
userName = DataBase.userName;
userAge = DataBase.userAge;
successFlag = false;
if (DataBase.DataType == "SQLServer") {
//在SQL Server数据库中插入数据
successFlag = InsertSQLData();
}else if (DataBase.DataType == "ORACLE") {
//在ORACLE数据库插入数据
successFlag = InsertORACLEData();
}
currentTime = new Date();
webSocket.send(JSON.stringify({
result: successFlag;
time: currentTime;
}))
};
</script>
参考阅读:
- 《HTML5与CSS3权威指南》
- w3school 在线教程
- w3cschool - 编程狮,随时随地学编程