基於Tomcate、java、websocket 簡單線上聊天

前言

     一直以來對於這個線上聊天有很大興趣，但是一直沒有學習入口，可能也是因為工作原因，沒精力去深究這玩意，前段時間為了瞭解這個socket，還專門看了幾章TCP/IP協議,想說稍微瞭解瞭解，後來沒堅持兩天，為什麼呢！ 看不懂... 後來直接上手吧，各種socket，執行緒。終於像個樣了，不過是以圖形化介面的形式展示出來，不像我想象中那樣，之後又看看了看這個websocket,說實話挺厲害，簡單的兩個介面就可以實現。至於原理嘛，我就不在這瞎吹了，大家可以在網上看看。

web.xml配置

跟所有servlet 在web.xml進行配置
 

<servlet>
        <servlet-name>socketHome</servlet-name>
        <servlet-class>SocketServer</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>socketHome</servlet-name>
        <url-pattern>/ws</url-pattern>
    </servlet-mapping
 
>

後臺程式碼
SocketServer.java，ws://協議的請求就必須實現WebSocketServlet這個類

import java.util.concurrent.atomic.AtomicInteger;

import javax.servlet.http.HttpServletRequest;

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

/**
 * 
 * @author wangbg 通訊入口
 */
 

@SuppressWarnings("deprecation")
public class SocketServer extends WebSocketServlet {

    /**
     * 
     */
    private static final long serialVersionUID = 1L;

    /**
     * 生成/獲取使用者
     * 
     * @param reuqest
     * @return
     */
    private String getUser(HttpServletRequest reuqest) {
        Object objectUser = reuqest.getSession().getAttribute("user");
        if (objectUser == null) {
            objectUser = "遊客" + reuqest.getSession().getId();
        }
        return objectUser.toString();
    }

    // 實現createWebSocketInbound，在這裡初始化自定義的WebSocket連線物件
    @Override
    protected StreamInbound createWebSocketInbound(String arg0,
            HttpServletRequest reuqest) {
        // TODO Auto-generated method stub
        return new MessageInbound(getUser(reuqest));
    }
}

MessageInbound.java,WebSocket連線物件類
程式碼中的主要實現了onOpen、onTextMessage方法，分別處理使用者上線、傳送訊息,還有onClose方法 不過我沒有實現。

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

import net.sf.json.JSONObject;

import org.apache.catalina.websocket.WsOutbound;


/**
 * 
 * @author wangbg 通訊互動
 */
@SuppressWarnings("deprecation")
public class MessageInbound extends
        org.apache.catalina.websocket.MessageInbound {

    private final String user;

    public MessageInbound(String user) {
        // TODO Auto-generated constructor stub
        this.user = user;
    }

    public String getUser() {
        return this.user;
    }

    /**
     * 使用者連線觸發事件 1 向連線池添加當前使用者 2 向線上使用者傳送當前使用者上線訊息 3 向當前使用者傳送線上使用者列表
     */
    @Override
    protected void onOpen(WsOutbound outbound) {
        // TODO Auto-generated method stub
        super.onOpen(outbound);
        // 向連線池添加當前使用者
        InboundPool.addInbound(this);
        JSONObject result = new JSONObject();
        // 向線上使用者傳送當前使用者上線訊息
        InboundPool.sendMessage(this.user + "上線");
        // 向當前使用者傳送線上使用者列表
        result = new JSONObject();
        result.element("onlineUser", InboundPool.getOnlineUser());
        InboundPool.sendMessageToUser(this.user, result.toString());
    }

    @Override
    protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
        // TODO Auto-generated method stub

    }

    /**
     * 客戶端傳送訊息時觸發
     */
    @Override
    protected void onTextMessage(CharBuffer message) throws IOException {
        // TODO Auto-generated method stub
        InboundPool.sendMessage(this.user + ":" + message.toString());
    }

}

InboundPool.java,連線物件池，管理線上使用者的連線

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

import net.sf.json.JSONObject;

import org.apache.catalina.websocket.WsOutbound;

/**
 * 
 * @author wangbg 通訊互動
 */
@SuppressWarnings("deprecation")
public class MessageInbound extends
        org.apache.catalina.websocket.MessageInbound {

    private final String user;

    public MessageInbound(String user) {
        // TODO Auto-generated constructor stub
        this.user = user;
    }

    public String getUser() {
        return this.user;
    }

    /**
     * 使用者連線觸發事件 1 向連線池添加當前使用者 2 向線上使用者傳送當前使用者上線訊息 3 向當前使用者傳送線上使用者列表
     */
    @Override
    protected void onOpen(WsOutbound outbound) {
        // TODO Auto-generated method stub
        super.onOpen(outbound);
        // 向連線池添加當前使用者
        InboundPool.addInbound(this);
        JSONObject result = new JSONObject();
        // 向線上使用者傳送當前使用者上線訊息
        InboundPool.sendMessage(this.user + "上線");
        // 向當前使用者傳送線上使用者列表
        result = new JSONObject();
        result.element("onlineUser", InboundPool.getOnlineUser());
        InboundPool.sendMessageToUser(this.user, result.toString());
    }

    @Override
    protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
        // TODO Auto-generated method stub

    }

    /**
     * 客戶端傳送訊息時觸發
     */
    @Override
    protected void onTextMessage(CharBuffer message) throws IOException {
        // TODO Auto-generated method stub
        InboundPool.sendMessage(this.user + ":" + message.toString());
    }

}

index.jsp 頁面訪問及互動

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<body>
    <input type="text" id="message" size="60" />
    <input type="button" id="send" value="傳送" />
    <br>
    <div id="panel"></div>
</body>
<script type="text/javascript">
    var panel = document.getElementById('panel');  
    var message = document.getElementById('message');  
    var send = document.getElementById('send') 
    // 控制檯輸出物件  
    var console = {
        log : function(text) {
            panel.innerHTML += text + "<br>";
        }
    };
    // WebSocket
    var socketBox = {
        socket : null, // WebSocket連線物件  
        host : '', // WebSocket連線 url  
        connect : function() { // 連線伺服器  
            window.WebSocket = window.WebSocket || window.MozWebSocket;
            if (!window.WebSocket) { // 檢測瀏覽器支援  
                console.log('Error: 請升級到ie10+瀏覽器 .');
                return;
            }
            // 建立連線並註冊響應函式  
            this.socket = new WebSocket(this.host);
            this.socket.onopen = function() {
                console.log("連線伺服器.");
            };
            this.socket.onmessage = function(res) {
                if (res.type == "message") {
                    console.log(res.data);
                }
            };
            this.socket.onclose = function() {
                console.log("伺服器斷開 .");
                socketBox.socket.onclose();
                socketBox.socket = null; // 清理  
            };
        },
        send : function(message) { // 傳送訊息方法  
            if (this.socket) {
                this.socket.send(message);
                return true;
            }
            console.log('請先連線伺服器 !!!');
            return false;
        }
    };
    // 初始化WebSocket連線 url  
    socketBox.host = (window.location.protocol == 'http:') ? 'ws://' : 'wss://';
    socketBox.host += window.location.host + '/websocket/ws';
    // 初始化按鈕點選事件函式  
    send.onclick = function() {
        var ms = message.value;
        if (!ms)
            return;
        if (!socketBox.send(ms))
            return;
        message.value = '';
    };
    if (!socketBox.socket)
        socketBox.connect();
</script>
</body>
</html>