WebSocket – Tomcat 簡單的聊天室

Posted in :

Java筆記

2017-10-26

在 Tomcat 裡實作 websocket 滿簡單的。

WebSocket可以在伺服器和瀏覽器之間建立雙向通訊，今天要來用WebSocket來實現一個簡單的聊天室做範例，Tomcat 伺服器的最小版本要求是 Tomcat 7, 目前我是使用 Tomcat 7.

附註1：如果你是走 ssl 需要把 ws:// 修改為 wss://
附註2：如果是 html 去存取別台伺服器的 wss, 如果是自簽的憑證會有問題。
附註3：不需要額外修改 tomcat 的 server.xml 或 web.xml

範例1：

==================
webSocketTest.html ：

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/webSocket.js"></script>
    </head>
    <body>
        <div>
            <form id="chatRoomForm" onsubmit="return false;">
                聊天室
                名字: <input type="text" id="userNameInput" /> 
 
                <input type="button" id="loginBtn" value="登入" /> <span id="infoWindow"></span>
 
                <input type="text" id="userinput" /> 
  
                <input type="submit" value="送出訊息" />
            </form>
        </div>
        <div id="messageDisplay"></div>
    </body>
</html>

webSocket.js ：

window.onload = function () {
    //獲取DOM元件
    var loginBtn = document.getElementById("loginBtn");
    var userNameInput = document.getElementById("userNameInput");
    var infoWindow = document.getElementById("infoWindow");
    var userinput = document.getElementById("userinput");
    var chatRoomForm = document.getElementById("chatRoomForm");
    var messageDisplay = document.getElementById("messageDisplay");
 
    var webSocket;
    var isConnectSuccess = false;
 
    //設置登入鈕的動作，沒有登出，登入才可發言
    loginBtn.addEventListener("click", function () {
        //檢查有無輸入名稱
        if (userNameInput.value && userNameInput.value !== "") {
            setWebSocket();  //設置WebSocket連接
        } else {
            infoWindow.innerHTML = "請輸入名稱";
        }
 
    });
    //Submit Form時送出訊息
    chatRoomForm.addEventListener("submit", function () {
        sendMessage();
        return false;
    });
    //使用webSocket擁有的function, send(), 送出訊息
    function sendMessage() {
        //檢查WebSocket連接狀態
        if (webSocket && isConnectSuccess) {
            var messageInfo = {
                userName: userNameInput.value,
                message: userinput.value
            }
            webSocket.send(JSON.stringify(messageInfo));
        } else {
            infoWindow.innerHTML = "未登入";
        }
    }
 
    //設置WebSocket
    function setWebSocket() {
        //開始WebSocket連線
        webSocket = new WebSocket('ws://localhost:8080/WebSocketTest/websocket');
        //以下開始偵測WebSocket的各種事件
         
        //onerror , 連線錯誤時觸發  
        webSocket.onerror = function (event) {
            loginBtn.disabled = false;
            userNameInput.disabled = false;
            infoWindow.innerHTML = "登入失敗";
        };
 
        //onopen , 連線成功時觸發
        webSocket.onopen = function (event) {
            isConnectSuccess = true;
            loginBtn.disabled = true;
            userNameInput.disabled = true;
            infoWindow.innerHTML = "登入成功";
             
            //送一個登入聊天室的訊息
            var firstLoginInfo = {
                userName : "系統",
                message : userNameInput.value + " 登入了聊天室"
            };
            webSocket.send(JSON.stringify(firstLoginInfo));
        };
 
        //onmessage , 接收到來自Server的訊息時觸發
        webSocket.onmessage = function (event) {
            var messageObject = JSON.parse(event.data);
            messageDisplay.innerHTML += "
" + messageObject.userName + " 說 : " + messageObject.message;
        };
    }
};

WebSocketEndpointTest.java：

import java.io.IOException;
import java.util.ArrayList;
import javax.websocket.EncodeException;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
 
@ServerEndpoint("/websocket")
public class WebSocketEndpointTest {
    //用來存放WebSocket已連接的Socket
    static ArrayList<Session> sessions;
 
    @OnMessage
    public void onMessage(String message, Session session) throws IOException,
            InterruptedException, EncodeException {
        System.out.println("User input: " + message);
        //session.getBasicRemote().sendText("Hello world Mr. " + message);
        //for (Session s : session.getOpenSessions()) {
        for (Session s : sessions) {    //對每個連接的Client傳送訊息
            if (s.isOpen()) {
                s.getBasicRemote().sendText(message);
            }
        }
    }
 
    @OnOpen
    public void onOpen(Session session) {
        //紀錄連接到sessions中
        System.out.println("Client connected");        
        if (sessions == null) {
            sessions = new ArrayList<Session>();
        }
        sessions.add(session);
        System.out.println("Current sessions size: " + sessions.size());
    }
 
    @OnClose
    public void onClose(Session session) {
        //將連接從sessions中移除
        System.out.println("Connection closed");
        if (sessions == null) {
            sessions = new ArrayList<Session>();
        }
        sessions.remove(session);
        System.out.println("Current sessions size: " + sessions.size());
    }
}

範例 2號，我是用這組來修改。

我们需要2个jar包：

tomcat7-websocket.jar
websocket-api.jar

這两个jar包是在tomcat7及以上版本的lib目录下获得的。主要是封装了websocket的API方法类以及实现了其中的方法。

当跳转到chat.jsp页面的时候，会加载其中的js文件，js中会开启一个通信管道。页面加载判断是否已经开启了这个通道，如果没有开启，就开启。当管道开启的时候就会触发onopen事件。触发的方法在ChatSocket类中。

chat.jsp：

<body>
  <script src="../js/jquery-3.2.1.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
<script>
        var ws; //一个ws对象就是一个通信管道！！，只要不关浏览器，不关闭服务器就一直开着
        var target="wss://192.168.1.215:8443/Core/WsPushServer?username=max32002";
        $().ready(function connect() {

                 //页面加载判断是否已经开启了target这个通道，如果没有开启，就开启
                 if ('WebSocket' in window) {
                     ws = new WebSocket(target);
                 } else if ('MozWebSocket' in window) {
                     ws = new MozWebSocket(target);
                 } else {
                     alert('WebSocket is not supported by this browser.');
                     return;
                 }


                //onerror , 連線錯誤時觸發  
                ws.onerror = function (event) {
                    alert("登入失敗");
                };

                 //接收消息 
                 ws.onmessage = function (event) {
                    eval("var result="+event.data);

                    if(result.alert!=undefined){
                        $("#content").append(result.alert+"<br/>");
                    }

                    if(result.names!=undefined){
                        $("#userList").html("");
                        $(result.names).each(function(){
                            $("#userList").append(this+"<br/>");
                        });
                    }

                    if(result.from!=undefined){
                        $("#content").append(result.from+" "+result.date+
                                " 说：<br/>"+result.sendMsg+"<br/>");
                    }

                 };
             });


        //点击发送消息触发事件
        function send(){
            var msg = $("#msg").val();
            ws.send(msg);
            $("#msg").val("");
        }
    </script>


    <h3>欢迎 max32002 使用本系统！！</h3>

    <div id="content"
        style="
        border: 1px solid black; width: 400px; height: 300px;
        float: left;
    "></div>
    <div id="userList"
        style="
        border: 1px solid black; width: 100px; height: 300px;
        float:left;
    "></div>

    <div style="clear: both;">
        <input id="msg" />
        <button onclick="send();">send</button>
    </div>

</body>

Java:

import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Set;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

import com.google.gson.Gson;

@ServerEndpoint("/WsPushServer")
public class WsPushServer {
    private  static  Set<WsPushServer>  sockets=new HashSet<WsPushServer>();
    private  static  List<String>   nameList=new ArrayList<String>();
    private  Session  session;
    private String username;
    private Gson  gson=new Gson();
    
    //只要有人连接这个服务，就会打开，执行下面的方法。
    @OnOpen
    public void open(Session session){
        //一个session就代表一个通信会话
        System.out.println("sessionid:"+session.getId()+"通道开启了。。。。");
        //把session添加到容器中
        this.session=session;
        sockets.add(this);

        //getQueryString把url中？后面的所有的串儿都取出来
        String QueryString = session.getQueryString();
        System.out.println(QueryString);
        
        //获取用户名
        this.username = QueryString.substring(QueryString.indexOf("=")+1);
        nameList.add(username);

        String message = (username+"进入聊天室！！");

        broadcast(sockets, gson.toJson(message) );
    }
    
    //退出
    @OnClose
    public void close(Session session){
        //1.清理退出的session
        sockets.remove(this);
        //2.清理列表用户名
        nameList.remove(this.username);
        //3.更新消息信息
        String message=(this.username+"退出聊天室！！");
        //4.广播消息信息
        broadcast(sockets, gson.toJson(message));
    }
    
    @OnError
    public void onError(Throwable e){
            e.printStackTrace();
    }

    //收
    @OnMessage
    /** * * @param session * @param msg 从客户端接收的消息 */
    public void message(Session session,String msg){
        //接收消息

        String  message=(this.username + ":" + msg + ":" + new Date().toString());
        broadcast(sockets, gson.toJson(message));

    }
    
    /** * 广播消息 * @param ss 用户session * @param msg 广播消息 */
    public void broadcast(Set<WsPushServer>  ss ,String msg ){

        for (Iterator<WsPushServer> iterator = ss.iterator(); iterator.hasNext();) {
                WsPushServer chatSocket = (WsPushServer) iterator.next();
            try {
                chatSocket.session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

Java, websocket

WebSocket – Tomcat 簡單的聊天室

相關文章：

發佈留言取消回覆

相關文章：

發佈留言 取消回覆

Related Posts

How to generate 1000 unique color in d3.js

學習d3js 最佳資源

python macos arm tkinter messagebox autorelease pool page error

d3js stacked bar chart / grouped bar chart 的坑

發佈留言取消回覆