jboot websocket的使用

本文参考:WebSocket的使用

点击下载源码
提取码:5ugr

效果如下:
在这里插入图片描述

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>

猜你喜欢

转载自blog.csdn.net/qq_39816586/article/details/89315533