jWebSocket使用指南

程序员文章站 2024-03-22 12:47:22

...

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、Opera 10.70以及Safari 5，不支持的浏览器可以是用Socket.IO技术

b、WebSocket API用法

// 创建一个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

包含：

jWebSocket Server：基于纯Java的WebSocket服务，可以实现Server-to-client，和server控制的client-to-client的通信

jWebSocket Client：基于纯JavaScript的WebSocket客户端，支持多种子协议，也可以支持Java和andriod，不需要插件

jWebSocket FlashBridge：基于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

function checkWS() {

if (window.WebSocket) {

alert( "HTML5 WebSocket is supported in your browser.");

} else {

alert("HTML5 WebSocket is not supported in your browser.");

}

checkWS();

</script>

Ie8也可以支持了（可以使用flashBridge来支持）

封装的函数：

获取dom对象：

jws.$( "schkDebug" );//getElementById();

事件监听

jws.events.addEventListener( eUsername[对象], "keydown"[事件], usrKeyDnLsnr[监听函数] );

定义js类

jws.oop = {};

// implement simple class declaration to support multi-level inheritance

// and easy 'inherited' calls (super-calls) in JavaScript

jws.oop.declareClass = function( aNamespace, aClassname, a Ancestor, 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

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 JavaScript couldn't be simpler...

var lObj = JSON.parse( aStream );

return lObj;

}

});

使用：new jws.jWebSocketJSONClient();

2.2.3.2. 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 a previous 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, "Error logging 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;

var lTarget = eTarget.value;

if( lMsg.length > 0 ) {

log( USR, OUT, lMsg );

var lRes;

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容器启动的时候加载监听

publicclass ContextListener implements ServletContextListener {

publicvoid contextInitialized(ServletContextEvent aSCE) {

// 启动WebSocket服务

JWebSocketFactory.start();

//获取一个tokenServer

TokenServer lTS0 = JWebSocketFactory.getTokenServer();

if (lTS0 != null) {

//给tokenServer增加自定义监听器（监听客户端与Server的一切交互）

System.out.println("----------tokenServer found");

lTS0.addListener(newMyJWebSocketTokenListenerSample());

}else{

System.out.println("----------tokenServer not found");

}

// assign web socket server to servlet bridge

//ServletBridge.setServer(JWebSocketFactory.getTokenServer());

}

publicvoid contextDestroyed(ServletContextEvent aSCE) {

// 关闭WebSocket服务

JWebSocketFactory.stop();

}

自定义WebSocketServerToken监听器

publicclass MyJWebSocketTokenListenerSample implements WebSocketServerTokenListener {

publicvoid processOpened(WebSocketServerEvent aEvent) {

System.out.println("login的时候会调用processOpened-------->Client '" + aEvent.getConnector() + "' connected.");

}

publicvoid processPacket(WebSocketServerEvent aEvent, WebSocketPacket aPacket) {

System.out.println("-------->aaa@qq.com data 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);

}

publicvoid processToken(WebSocketServerTokenEvent aEvent, 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等

}

/**

* @param aEvent

publicvoid processClosed(WebSocketServerEvent aEvent) {

System.out.println("-------->Client '" + aEvent.getConnector() + "' disconnected.");

}

在web.xml中配置ServletContext监听即可

以下是我用jwebsocket在网页上实现的效果

jWebSocket使用指南

支持用户上下线通知及更新，一个webSocket连接支持多用户同时在线聊天，消息提醒等功能

jWebSocket使用指南

2. JWebSocket

2.1. 下载安装

2.1.1 独立的server（略，很简单，执行bin/startup即可）

2.1.2.集成在tomcat中运行

2.2. 开发指南

2.2.1. 要求

2.2.2. Eclipse开发

2.2.3. JS工具包

2.2.3.1. jWebSocket.js（很庞大，涵盖了所有其他js）

2.2.3.2. token

2.2.3.3. 其他

2.2.4. Demo功能(下载的demo里都有附带，以下只是一些关键说明)

2.2.4.1. 聊天chat

代码之余轻松一下：当前热门-人民的名义

思考与行动

JAVAEE容器如何管理EntityManager和PersistenceContext

jWebSocket使用指南

Shodan使用指南

Modernizr使用指南

Ipython使用指南

tensorboard使用指南

javaagent使用指南

Swagger使用指南

【使用指南】Kettle转换使用教程

EHCache 初步使用指南 HibernateCacheXMLApache配置管理

Podman 使用指南