05-HTML5强大的新 API，07-Web Sockets

原创 于 2020-03-09 23:54:19 发布
· 230 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5 #前端 #api

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.youkuaiyun.com/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>

参考阅读：

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值