脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5之WebSocket,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
Introduction:
准备实践一些HTML5的新技术来强化项目的工具。设计后台交互部分选择了HTML5的WebSocket,研究了一下基本的用法,想写点对于WebSocket实践的感受。
个人觉得WebSocket的出现是对于Web应用交互性设计的一次革新。WebSocket提出之前,为了解决后台推送消息到前台的需求,提出了一些解决方案,这些方案使用已有的技术(如ajax,iframe,flashplayer,java applet ...),通过一些变通的处理来实现。基本思路都是通过轮询的方式不断的由Client browser向Server请求任何数据和页面的变化,亦或通过长连接的方式借助第三方插件来达到即时的收到Server的数据。
而WebSocket允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无状态协议,协议名为"ws",这意味着一个websocket连接地址会是这样的写法:ws://localhost:8080/webSocketServer。ws不是http,所以传统的web服务器不一定支持,需要服务器与浏览器同时支持, WebSocket才能正常运行,目前的支持还不普遍,需要特别的web服务器和现代的浏览器。一下是浏览器对WebSocket支持情况:
[java]
public class AutoAdminServlet extends WebSocketServlet{
//PRivate static final long serialVersionUID = 1874288265454885922L;
private final Set<AutoAdminSocket> clients;
static LOGger LOG = Logger.getLogger(AutoAdminServlet.class);
public AutoAdminServlet(){
clients = new HashSet<AutoAdminSocket>();
}
@override
public WebSocket doWebSocketConnect(HttpServletRequest req, String message) {
LOG.info("Set up a web socket connection: "+message);
return new AutoAdminSocket();
}
class AutoAdminSocket implements WebSocket.OnTextMessage{
WebSocket.Connection connection;
@Override
public void onMessage(String message) {
/*
Object JSON = JSON.parse(message);
if(!(json instanceof Map))
return;
@SupPressWarnings("unchecked")
Map<String, String> map = (Map<String, String>)json;
//TODO
*/
sendMessage(this, null, "Thanks, I received: "+message);
}
@Override
public void onClose(int code, String message) {
LOG.info("Closed and removed a client socket connection.");
clients.remove(this);
}
@Override
public void onOpen(Connection conn) {
LOG.info("Received a client socket connection.");
this.connection = conn;
clients.add(this);
sendMessage(this, "open", "sample data");
}
}
void sendMessage(AutoAdminSocket client, String action, String message){
try{
if(message == null || message.iSEMpty())
message = "n/a";
if(action != null)
message = "action: "+action+", data: "+message;
client.connection.sendMessage(message);
}catch(IOException ex){
ex.printStackTrace();
}
}
}
前台页面代码部分,主要做好以下几点:
1. 在Javascript中判断浏览器是否支持WebSocket,并提供一些友好提示或者备案方案
2. 创建WebSocket这个Javascript对象,并谨慎管理它: 忌讳滥用不断与Server的建立WebSocket,一般一个Browser终端维护一个连接即可,逻辑的多样性可以通过Command模式来丰富
3. 当Browser需要主动与Server通信时,调用WebSocket API中的send方法
4. 当Server主动推送数据到Browser时,在onMessage方法中dispatch多样的business
[javascript]
VAR log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("output").innerHTML += (s + "/n");
}
}
log.buffer = [];
var socket = null;
function inIT(){
window.WebSocket = window.WebSocket || window.MozWebSocket;
if(!window.WebSocket){
log("WebSocket not supported by this browser");
return;
}
var webSocket = new WebSocket("ws://127.0.0.1:8080/pulsenet/auto");
webSocket.onopen = onopen;
webSocket.onclose = onclose;
webSocket.onmessage = onmessage;
socket = webSocket;
}
function onopen(){
log("Open a web socket.");
}
function onclose(){
log("Close a web socket.");
}
function onmessage(evt){
var data = evt.data;
if(!data) return;
log(data);
data = JSON.parse(data);
if(!data) return;
}
function send(){
socket.send("Hello web socket server!");
}
作者:Ant_Yan
Introduction:
准备实践一些HTML5的新技术来强化项目的工具。设计后台交互部分选择了HTML5的WebSocket,研究了一下基本的用法,想写点对于WebSocket实践的感受。
个人觉得WebSocket的出现是对于Web应用交互性设计的一次革新。WebSocket提出之前,为了解决后台推送消息到前台的需求,提出了一些解决方案,这些方案使用已有的技术(如ajax,iframe,flashplayer,java applet ...),通过一些变通的处理来实现。基本思路都是通过轮询的方式不断的由Client Browser向Server请求任何数据和页面的变化,亦或通过长连接的方式借助第三方插件来达到即时的收到Server的数据。
而WebSocket允许后台随时向前端发送文本或者二进制消息,WebSocket是一种全新的协议,不属于http无状态协议,协议名为"ws",这意味着一个websocket连接地址会是这样的写法:ws://localhost:8080/webSocketServer。ws不是http,所以传统的web服务器不一定支持,需要服务器与浏览器同时支持, WebSocket才能正常运行,目前的支持还不普遍,需要特别的web服务器和现代的浏览器。一下是浏览器对WebSocket支持情况:
[java]
public class AutoAdminServlet extends WebSocketServlet{
//private static final long serialVersionUID = 1874288265454885922L;
private final Set<AutoAdminSocket> clients;
static Logger LOG = Logger.getLogger(AutoAdminServlet.class);
public AutoAdminServlet(){
clients = new HashSet<AutoAdminSocket>();
}
@Override
public WebSocket doWebSocketConnect(HttpServletRequest req, String message) {
LOG.info("Set up a web socket connection: "+message);
return new AutoAdminSocket();
}
class AutoAdminSocket implements WebSocket.OnTextMessage{
WebSocket.Connection connection;
@Override
public void onMessage(String message) {
/*
Object json = JSON.parse(message);
if(!(json instanceof Map))
return;
@SuppressWarnings("unchecked")
Map<String, String> map = (Map<String, String>)json;
//TODO
*/
sendMessage(this, null, "Thanks, I received: "+message);
}
@Override
public void onClose(int code, String message) {
LOG.info("Closed and removed a client socket connection.");
clients.remove(this);
}
@Override
public void onOpen(Connection conn) {
LOG.info("Received a client socket connection.");
this.connection = conn;
clients.add(this);
sendMessage(this, "open", "sample data");
}
}
void sendMessage(AutoAdminSocket client, String action, String message){
try{
if(message == null || message.isEmpty())
message = "n/a";
if(action != null)
message = "action: "+action+", data: "+message;
client.connection.sendMessage(message);
}catch(IOException ex){
ex.printStackTrace();
}
}
}
前台页面代码部分,主要做好以下几点:
1. 在Javascript中判断浏览器是否支持WebSocket,并提供一些友好提示或者备案方案
2. 创建WebSocket这个Javascript对象,并谨慎管理它: 忌讳滥用不断与Server的建立WebSocket,一般一个Browser终端维护一个连接即可,逻辑的多样性可以通过Command模式来丰富
3. 当Browser需要主动与Server通信时,调用WebSocket API中的send方法
4. 当Server主动推送数据到Browser时,在onMessage方法中dispatch多样的business
[javascript]
var log = function(s) {
if (document.readyState !== "complete") {
log.buffer.push(s);
} else {
document.getElementById("output").innerHTML += (s + "/n");
}
}
log.buffer = [];
var socket = null;
function init(){
window.WebSocket = window.WebSocket || window.MozWebSocket;
if(!window.WebSocket){
log("WebSocket not supported by this browser");
return;
}
var webSocket = new WebSocket("ws://127.0.0.1:8080/pulsenet/auto");
webSocket.onopen = onopen;
webSocket.onclose = onclose;
webSocket.onmessage = onmessage;
socket = webSocket;
}
function onopen(){
log("Open a web socket.");
}
function onclose(){
log("Close a web socket.");
}
function onmessage(evt){
var data = evt.data;
if(!data) return;
log(data);
data = JSON.parse(data);
if(!data) return;
}
function send(){
socket.send("Hello web socket server!");
}
作者:Ant_Yan
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的html5教程-HTML5之WebSocket全部内容,希望文章能够帮你解决html5教程-HTML5之WebSocket所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。