1、先讲讲HTML5的WebSocket
HTML5规范中提供了WebSocket技术,替代了之前的ajax实现消息通信的方法。
WebSocket协议,简称WS(WSS-Secure),可以支持客户端-服务端任意消息推送,支持跨域(AJAX跨域会有问题),可降低系统开销及复杂性。网上已经有很多关于WebSocket的介绍,这里不再重复。
以下是WebSocketAPI的使用说明
a、 检测浏览器是否支持WebSocket
- function checkWS() {
- if (window.WebSocket) {
- alert( "HTML5 WebSocket is supported in your browser.");
- } else {
- alert("HTML5 WebSocket is not supported in your browser.");
- }
- }
支持的浏览器有Firefox 4、Chrome 4、Opera10.70以及Safari 5,不支持的浏览器可以是用Socket.IO技术
b、WebSocketAPI用法
- // 创建一个Socket实例
- var socket = new WebSocket(‘ws://localhost:8080′);
- // 打开Socket
- socket.onopen = function(event) {
- // 发送一个初始化消息
- socket.send(‘I am the client and I\’m listening!’);
- // 监听消息
- socket.onmessage = function(event) {
- console.log(‘Client received a message’,event);
- };
- // 监听Socket的关闭
- socket.onclose = function(event) {
- console.log(‘Client notified socket has closed’,event);
- };
- // 关闭Socket….
- //socket.close()
c、 Demo#
- <!DOCTYPE html>
- <head>
- <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>
- </head>
- <body>
- <input type="text" id="inputMessage" value="Hello, WebSocket!">
- <button id="sendButton">Send</button>
- <pre id="output"></pre>
- </body>
- </html>
2. JWebSocket
http://jwebsocket.org/(最新版本v1.0 beta5)
jWebSocket是个纯Java/JavaScript高速的WEB双向通信解决方案,基于HTML5
包含:
jWebSocketServer:基于纯Java的WebSocket服务,可以实现Server-to-client,和server控制的client-to-client的通信
jWebSocketClient:基于纯JavaScript的WebSocket客户端,支持多种子协议,也可以支持Java和andriod,不需要插件
jWebSocketFlashBridge:基于Flash的WebSocket封装,需要flash插件
2.1. 下载安装
2.1.1 独立的server(略,很简单,执行bin/startup即可)
2.1.2.集成在tomcat中运行
1、 设置JWEBSOCKET_HOME必须(最好重启)
2、 将jWebSocketServer-Bundle-1.0.jar、jWebSocketSamples-1.0.jar拷贝到tomcat6的lib下
3、 将jWebSocketAppSrvDemo-1.0.war拷贝到tomcat6的webapps下
4、 启动tomcat
5、 访问http://localhost:8080/jWebSocketAppSrvDemo-1.0/
6、 使用IP地址访问
(在JWEBSOCKET_HOME/conf/jWebSocket.xml里增加<domain>http://192.168.3.50</domain>,tomcat里的conf/jWebSocket.xml修改没有效果)
2.2. 开发指南
2.2.1. 要求
JDK1.6+
Apache Maven 2.2
Eclipse3.5
Apache tomcat6+
2.2.2. Eclipse开发
下载jWebSocket源码,使用maven导入可以将代码都导入到eclipse中
或者直接创建项目,把jWebSocketServer的libs导进来,自己做开发
2.2.3. JS工具包
2.2.3.1.jWebSocket.js(很庞大,涵盖了所有其他js)
jws对象:
JWS_SERVER_PORT: 8787
JWS_SERVER_SSL_PORT: 9797
JWS_SERVER_URL: "ws://"+ ( self.location.hostname ? self.location.hostname : "127.0.0.1" ) +":8787/jWebSocket/jWebSocket"
在我们的页面中引入jWebSocket.js便可以使浏览器支持WebSocket
<scripttype="text/javascript" language="JavaScript"src="jWebSocket.js"></script>
<scripttype="text/javascript" language="JavaScript">
function checkWS() {
if (window.WebSocket){
alert( "HTML5WebSocket is supported in your browser.");
} else {
alert("HTML5WebSocket is not supported in your browser.");
}
}
checkWS();
</script>
Ie8也可以支持了(可以使用flashBridge来支持)
封装的函数:
获取dom对象:
jws.$( "schkDebug" );//getElementById();
事件监听
jws.events.addEventListener( eUsername[对象], "keydown"[事件],usrKeyDnLsnr[监听函数] );
定义js类
jws.oop = {};
// implementsimple class declaration to support multi-level inheritance
// and easy'inherited' calls (super-calls) in JavaScript
jws.oop.declareClass= function( aNamespace, aClassname, aAncestor, aFields ) {
…
}
如定义一个jWebSocketBaseClient(基类):
jws.oop.declareClass("jws", "jWebSocketBaseClient", null, {
create();
processOpened(event);
processPacket
processClosed
open( aURL, aOptions );
connect: ( aURL, aOptions );
processQueue
queuePacket: ( aPacket, aOptions )
sendStream(data);
abortReconnect();
setAutoReconnect;
setQueueItemLimit
setQueueSizeLimit
setReliabilityOptions
getReliabilityOptions
getOutQueue
resetSendQueue
isOpened
getURL
getSubProt
forceClose
isConnected
close
disconnect
addListener
removeListener
addPlugIn
setParam
getParam
clearParams
}
如定义一个jWebSocketTokenClient继承jWebSocketBaseClient:
jws.oop.declareClass("jws", "jWebSocketTokenClient", jws.jWebSocketBaseClient,{
…//继承的方法
getId();unique clientId
checkCallbacks(token);
checkConnected
isWriteable
checkWriteable
checkLoggedIn
resultToString
tokenToStream/streamToToken
notifyPlugInsOpened/notifyPlugInsClosed
sendToken( aToken, aOptions )
getLastTokenId
getNextTokenId
sendText: function( aTarget, aText ){
var lRes = this.checkLoggedIn();
if( lRes.code == 0 ) {
this.sendToken({
ns: jws.NS_SYSTEM,
type:"send",
targetId: aTarget,
sourceId:this.fClientId,
sender:this.fUsername,
data: aText
});
}
return lRes;
}
broadcastText( aPool, aText,aOptions )
}
如定义一个jWebSocketJSONClient继承jWebSocketTokenClient
jws.oop.declareClass("jws", "jWebSocketJSONClient",jws.jWebSocketTokenClient, {
tokenToStream: function( aToken ) {
aToken.utid = jws.CUR_TOKEN_ID;
var lJSON = JSON.stringify( aToken);
return(lJSON );
},
streamToToken: function( aStream ) {
// parsing a JSON object in JavaScriptcouldn't be simpler...
var lObj = JSON.parse( aStream );
return lObj;
}
});
使用:newjws.jWebSocketJSONClient();
2.2.3.2.<!--[endif]-->token
一个token对象包含1个或多个域(field)和值,使用HashMap<String(field),Object(value)>来存储。
客户端js可以任意增加token的属性(采用json的格式),如发送消息
- this.sendToken({
- ns: jws.NS_SYSTEM,
- type: "send",
- targetId: aTarget,
- sourceId: this.fClientId,
- sender: this.fUsername,
- myKey1:"myVal1",//自己增加的属性
- myKey2:"myVal2",//后台可以直接获取到
- data: aText
- });
2.2.3.3.其他
略
2.2.4. Demo功能(下载的demo里都有附带,以下只是一些关键说明)
2.2.4.1.聊天chat
A、创建客户端
lWSC= new jws.jWebSocketJSONClient();
B、与服务端连接
WebSocketServerUrl:
[ws://host:port/jWebSocket/jWebSocket]
var lURL = jws.getDefaultServerURL();
àws://localhost:8787/jWebSocket/jWebSocket
与WebSocketServer建立连接、接收消息、关闭连接
lWSC.isLoggedIn()//判断是否已经处于连接状态
lWSC.logon(lURL, eUsername.value, ePassword.value, {
OnOpen:function( aEvent ) {
//建立连接事件
checkKeepAlive({immediate: false });//是否保持连接状态,调用 lWSC.startKeepAlive(aOptions );或lWSC.stopKeepAlive()
},
// 消息到达回调
Token:
token.type[“response”/”event”/”goodBye”/”broadcast”]
token.reqType[“login”/”getClients”]
token.code
token.count
token.clients
token.msg
token.sender
token.data
OnMessage:function( aEvent, aToken ) {
if(aToken ) {
// is it a response from aprevious request of this client?
if(aToken.type == "response" ) {
//figure out of which request
if( aToken.reqType == "login" ) {
if(aToken.code == 0 ) {
//call getAuthClients method from
// jWebSocket System Client Plug-In
lWSC.getAuthClients({
pool:null
});//获取客户端
}else {
log( SYS, IN, "Errorlogging in '" + eUsername.value + "':" + aToken.msg );
}
}else if( aToken.reqType == "getClients" ) {
log(SYS, IN, "Clients (" +aToken.count + "): " +aToken.clients );
}
//is it an event w/o a previous request ?
}else if( aToken.type == "event" ) {
//interpret the event name
} else if( aToken.type == "goodBye" ) {
log(SYS, IN, lJWSID + " says good bye (reason: " +aToken.reason + ")!" );
//is it any token from another client
}else if( aToken.type == "broadcast" ) {
if(aToken.data ) {
log(aToken.sender, IN, aToken.data );
}
}
}
},
//关闭连接事件
OnClose: function(aEvent ) {
lWSC.stopKeepAlive();
...
})
//获取已经认证的客户端
var lRes= lWSC.getAuthClients({
pool:null
});
lRes.msg
C、给服务端发送消息:
使用客户端(lWSC)的broadcastText()、sendText()
function broadcast() {
var lMsg= eMessage.value;
varlTarget = eTarget.value;
if( lMsg.length> 0 ) {
log(USR, OUT, lMsg );
varlRes;
if(!lTarget || lTarget == "*") {
lRes= lWSC.broadcastText(
"", //broadcast to all clients (not limited to a certain pool)
lMsg //broadcast this message
);
}else {
lRes= lWSC.sendText(
lTarget, // broadcast to all clients(not limited to a certain pool)
lMsg //broadcast this message
);
}
// log error only, on success don't confuse the user
if(lRes.code != 0 ) {
log(SYS, OUT, "broadcast: " + lRes.msg );
}
}
…
}
D、服务端
自定义ServletContext监听器ServletContextListener:Servlet容器启动的时候加载监听
public classContextListener implementsServletContextListener {
public voidcontextInitialized(ServletContextEvent aSCE) {
// 启动WebSocket服务
JWebSocketFactory.start();
//获取一个tokenServer
TokenServer lTS0 = JWebSocketFactory.getTokenServer();
if(lTS0 != null) {
//给tokenServer增加自定义监听器(监听客户端与Server的一切交互)
System.out.println("----------tokenServerfound");
lTS0.addListener(new MyJWebSocketTokenListenerSample());
}else{
System.out.println("----------tokenServernot found");
}
// assign web socket serverto servlet bridge
//ServletBridge.setServer(JWebSocketFactory.getTokenServer());
}
public voidcontextDestroyed(ServletContextEvent aSCE) {
// 关闭WebSocket服务
JWebSocketFactory.stop();
}
}
自定义WebSocketServerToken监听器
public classMyJWebSocketTokenListenerSample implements WebSocketServerTokenListener{
public void processOpened(WebSocketServerEventaEvent) {
System.out.println("login的时候会调用processOpened-------->Client'" + aEvent.getConnector() + "'connected.");
}
public void processPacket(WebSocketServerEventaEvent, WebSocketPacket aPacket) {
System.out.println("-------->processPacket@Processingdata packet '" + aPacket.getUTF8() + "'...");
//Here you can answer an arbitrary text package...
//this is how to easily respond to a previous client's request
//aEvent.sendPacket(aPacket);
//this is how to send a packet to any connector
//aEvent.getServer().sendPacket(aEvent.getConnector(), aPacket);
}
public void processToken(WebSocketServerTokenEventaEvent, Token aToken) {
System.out.println("-------->Client'" + aEvent.getConnector() + "'sent Token: '" + aToken.toString() + "'.");
String lNS = aToken.getNS();
String lType = aToken.getType();
if("send".equals(lType)){
//{"ns":"org.jwebsocket.plugins.system","type":"send",
//"targetId":"01.32273.0","targetUserName":"tttt","sourceId":"01.32722.3",
//"sourceUserName":"qqqqqq","sender":"guest","data":"22222222","utid":4}
String receiver = aToken.getString("targetUserName");
String sender = aToken.getString("sourceUserName");
String data = aToken.getString("data");
System.out.println("-----------send......."+sender+"-->"+receiver+"["+data+"]");
//自己增加操作,如保存到DB等
}
}
}
/**
*
* @paramaEvent
*/
public void processClosed(WebSocketServerEventaEvent) {
System.out.println("-------->Client'" + aEvent.getConnector() + "'disconnected.");
}
}
在web.xml中配置ServletContext监听即可
以下是我用jwebsocket在网页上实现的效果
支持用户上下线通知及更新,一个webSocket连接支持多用户同时在线聊天,消息提醒等功能