html5 websocket 手机,HTML5 WebSocket 示范

HTML5 WebSocket 示例

我们通过一个简单的例子来熟悉 HTML5 WebSocket。该例子服务端从 0 开始每秒递增一个整数并发送给客户端浏览器显示。准备：Jetty 7 ，Java Web 开发环境，Chrome 4+

服务端 Java 代码：

final public class CounterSocketServlet extends WebSocketServlet {

@Override

protected WebSocket doWebSocketConnect(final HttpServletRequest hsr,

final String string) {

return new CounterSocket();

}

final class CounterSocket implements WebSocket {

private Outbound outbound;

public void onConnect(final Outbound outbound) {

System.out.println("onConnect");

this.outbound = outbound;

}

public void onMessage(final byte frame, final String data) {

System.out.println("onMessage");

if (data.equals("Hello, Server!")) {

new Thread() {

@Override

public void run() {

try {

outbound.sendMessage(frame, "Hello, browser :-)");

int i = 0;

while (true) {

sleep(1000);

outbound.sendMessage(frame, String.valueOf(i++));

}

} catch (final Exception e) {

System.err.println(e.getMessage());

}

}

}.start();

}

}

public void onMessage(final byte frame, final byte[] data,

final int offset, final int length) {

throw new UnsupportedOperationException("Not supported yet.");

}

public void onDisconnect() {

System.out.println("onDisconnect");

}

}

}

浏览器客户端 HTML 代码：

WebSoket Demo

if (!window.WebSocket) {

alert("WebSocket not supported by this browser!");

}

function display() {

var valueLabel = document.getElementById("valueLabel");

valueLabel.innerHTML = "";

var ws = new WebSocket(

"ws://localhost:8080/WebSocketDemo/counter-socket");

ws.onmessage = function(evt) {

valueLabel.innerHTML = evt.data;

};

ws.onclose = function() {

};

ws.onopen = function() {

ws.send("Hello, Server!");

};

}

运行：

1. 部署

将打包好的 WebSocketDemo.war 复制到 Jetty 安装目录：

2. 启动 Jetty

C:\jetty-distribution-7.0.1.v20091125>java -jar start.jar

3. 测试