jboot websocket的使用

本文參考:WebSocket的使用

點擊下載源碼

效果如下:
在這裏插入圖片描述

1.修改jboot.properties
2.添加WebSocketTest.java
3.前端測試

1.修改jboot.properties
在這裏插入圖片描述
2.添加WebSocketTest.java

package cn.cyz.websocket;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

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 WebSocketTest {

    //當前在線連接數
    private static int onlineCount = 0;

    //存儲每個客戶端的對象
    private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();

    //客戶端session
    private Session session;

    @OnOpen
    public void onOpen(Session session) {

        this.session = session;
        webSocketSet.add(this);
        onlineCount++;
        onMessage("有新連接加入!當前在線人數爲" + onlineCount, this.session);
    }

    @OnClose
    public void close(){

        webSocketSet.remove(this);
        onlineCount--;
        onMessage("有一連接關閉!當前在線人數爲" + onlineCount, this.session);
    }

    @OnMessage
    public void onMessage(String message, Session session) {

        for(WebSocketTest item: webSocketSet){
            try {
                //當對象處於開啓狀態下執行以下
                item.session.getBasicRemote().sendText(message);
            } catch (IOException e) {
                e.printStackTrace();
                continue;
            }
        }
    }


}

3.前端測試

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>WebSocket測試</title>
	</head>
	<body>
		<input id="text" type="text" />
		<button onclick="send()">發送消息</button>
		<hr/>
		<button onclick="closeWebSocket()">關閉WebSocket連接</button>
		<hr/>
		<div id="message"></div>
	</body>
	
	<script type="text/javascript">
		var websocket = null;
		//判斷當前瀏覽器是否支持WebSocket
		if ('WebSocket' in window)
			websocket = new WebSocket("ws://127.0.0.1:8888/websocket");
		else 
			alert('當前瀏覽器 Not support websocket')
		
		//連接發生錯誤的回調方法
		websocket.onerror = function() {
			setMessageInnerHTML("WebSocket連接發生錯誤");
		};
	
		//連接成功建立的回調方法
		websocket.onopen = function() {
			setMessageInnerHTML("WebSocket連接成功");
		}
	
		//接收到消息的回調方法
		websocket.onmessage = function(event) {
			setMessageInnerHTML(event.data);
		}
	
		//連接關閉的回調方法
		websocket.onclose = function() {
			setMessageInnerHTML("WebSocket連接關閉");
		}
	
		//監聽窗口關閉事件,當窗口關閉時,主動去關閉websocket連接,防止連接還沒斷開就關閉窗口,server端會拋異常。
		window.onbeforeunload = function() {
			closeWebSocket();
		}
	
		//將消息顯示在網頁上
		function setMessageInnerHTML(innerHTML) {
			document.getElementById('message').innerHTML += innerHTML + '<br/>';
		}
	
		//關閉WebSocket連接
		function closeWebSocket() {
			websocket.close();
		}
	
		//發送消息
		function send() {
			var message = document.getElementById('text').value;
			websocket.send(message);
		}
	</script>
</html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章