歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 WebSocket開發

HTML5 WebSocket開發

日期:2017/3/1 10:04:55   编辑:Linux編程

需要:支持websocket的服務器,支持HTML5的浏覽器,jar包

我用tomcat7+chrome22運行,注意不是所有tomcat 7都支持websocket

首先要明白websocket的流程

登錄---》js提交信息--》servlet接受,返回給XX--》JS接受

於是至少需要一個鏈接隊列,一個servlet

1.建立一個隊列List<MessageInbound> socket,靜態也好,緩存也好,反正記錄好鏈接注冊

2.servlet

package servlet;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

import function.Server;

final public class WebSocket extends WebSocketServlet {
private static final long serialVersionUID = 1L;

@Override
protected StreamInbound createWebSocketInbound(String arg0,HttpServletRequest arg1) {
return new SocketMessage();//新鏈接
}
}
class SocketMessage extends MessageInbound {
//重寫連接
protected void onOpen(WsOutbound outbound) {
super.onOpen(outbound);
Server.socket.add(this);//增加到鏈接隊列
}
//重寫退出
protected void onClose(int status) {
Server.socket.remove(this);//從鏈接隊列刪除
super.onClose(status);
}
//重寫數據交換 這裡不同參數重構不同方法
protected void onBinaryMessage(ByteBuffer msg) throws IOException {
}
protected void onTextMessage(CharBuffer msg) throws IOException {
for (MessageInbound messageInbound : Server.socket) {//發給每個人,這個地方只有發揮,可以做到指定發送
CharBuffer buffer = CharBuffer.wrap(msg);
WsOutbound outbound = messageInbound.getWsOutbound();
outbound.writeTextMessage(buffer);
outbound.flush();
}
}
}

這裡會發現缺少jar,導入Apache Software Foundation\Tomcat 7.0\lib裡的catalina.jar和tomcat-coyote.jar即可,注意導入方式,不然部署的時候會jar沖突,因為tomcat本身就有這個2個jar

記得寫入web.xml

3.寫js調用

var ws;
function init() {
if(window.WebSocket)
ws = new WebSocket("ws://127.0.0.1:8888/ws/websocket");//上邊servlet在web.xml注冊的路徑
else{
alert("不支持");
return;
}
ws.onmessage = function(evt) {
//evt.data是返回的消息
};
ws.onclose = function(evt) {
//服務器關閉
};
ws.onopen = function(evt) {
//連接成功
};
}
function sendMsg() {
//ws.send(str);//發送消息
}

注意,init()需要調用一次

Copyright © Linux教程網 All Rights Reserved