HTML5中WebSockets API使用详解

HTML5中WebSockets API使用详解

时间:2012-01-09 22:03来源:http://www.itivy.com/ 作者:小神仙 点击: 1745次

一、检测浏览器是否支持HTML5 WebSockets 在使用HTML5 WebSockets API之前，首先需要确认浏览器的支持情况。如果浏览器不支持，我们可以提供一些替代信息，提示用户升级浏览器。下面的代码是检测浏览器支持情况的一种方法： function loadDemo() { if (window.WebSocket
　　

　　一、检测浏览器是否支持HTML5 WebSockets

　　在使用HTML5 WebSockets API之前，首先需要确认浏览器的支持情况。如果浏览器不支持，我们可以提供一些替代信息，提示用户升级浏览器。下面的代码是检测浏览器支持情况的一种方法：

function loadDemo() {
if (window.WebSocket) {
document.getElementById("support").innerHTML = "HTML5 WebSocket is supported in your
browser.";
} else {
document.getElementById("support").innerHTML = "HTML5 WebSocket is not supported in
your browser.";
}
}

 

　　上面的示例代码使用loadDemo函数检测浏览器支持性，该函数会在页面加载时被调用。若存在WebSocket对象，调用window.WebSocket就会将其返回，否则将触发异常失败处理。然后，根据检测结果更新页面显示。由于页面代码中预定义了support元素，将适当的信息显示在此元素中就可以从页面上反映出浏览器的支持情况。

　　检测浏览器是否支持HTML5 WebSockets的另一种方法是使用浏览器控制台(如Firebug或Chrome开发工具)。下图是在Google Chrome中检测自身是否支持WebSockets(若不支持，window.WebSocket命令将返回“undefined“)。

　　

 

　　二、HTML5 WebSockets API的基本用法

　　1、WebSocket对象的创建及其与WebSocket服务器的连接。

　　WebSocket接口的使用非常简单，要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

url = "ws://localhost:8080/echo";
w = new WebSocket(url);

　　2、添加事件监听器

 

　　WebSocket编程遵循异步编程模型;打开socket后，只需要等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。

　　WebSocket对象有三个事件:open，close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。同大多数Javascript API一样，事件处理时会调用相应的(onopen, onmessage, 和onclose)回调函数。

w.onopen = function() {
log("open");
w.send("thank you for accepting this websocket request");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}

 

　　3、发送消息

　　当socket处于打开状态(即调用onopen监听程序之后，调用onclose监听程序之前)，可以采用send方法来发送消息。消息发送完成之后，可以调用close方法来终止连接，当然也可以不这么做，让其保持打开状态。

document.getElementById("sendButton").onclick = function() {
w.send(document.getElementById("inputMessage").value);
}

 

　　浏览器双向通信就这么简单，下面是HTML5 WebSockets API使用的完整代码:

<!DOCTYPE html>
<title>WebSocket Test Page</title>
<script>
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("output").innerHTML += (s + "\n");
}
}
log.buffer = [];
url = "ws://localhost:8080/echo";
w = new WebSocket(url);
w.onopen = function() {
log("open");
w.send("thank you for accepting this WebSocket request");
}
w.onmessage = function(e) {
log(e.data);
}
w.onclose = function(e) {
log("closed");
}
window.onload = function() {
log(log.buffer.join("\n"));
document.getElementById("sendButton").onclick = function() {
w.send(document.getElementById("inputMessage").value);
}
}
</script>
<input type="text" id="inputMessage" value="Hello, WebSocket!"><button
id="sendButton">Send</button>
<pre id="output"></pre>

 

　　至此，我们就把HTML5 WebSockets API的使用方法介绍完了，希望对大家有所帮助。

　　本文来自深蓝色右手的博客，原文地址：http://www.itivy.com/html5/archive/2011/12/23/html5-websockets-api-usage.html

 

转载自：http://www.silverlightchina.net/html/HTML_5/study/2012/0109/13218.html

posted @ 2015-06-04 08:23  清幽紫竹  Views(571)  Comments(0)    收藏  举报