springBoot结合webSocket基本使用

最新推荐文章于 2024-08-05 14:47:59 发布

技术武器库

最新推荐文章于 2024-08-05 14:47:59 发布

阅读量815

点赞数 1

分类专栏： SpringBoot 文章标签： webSocket springBoot springBoot融入webSocket

本文链接：https://blog.csdn.net/l848168/article/details/84340773

版权

SpringBoot 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

服务端代码：

1.加入依赖

   <!--我使用的是spring-boot版本是2.0.4-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <dependencies>
        <!--加入webSocket的start启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    </dependencies>

2.创建服务器端点


/**
 * 对于 WebSocket 的使用，可以先通过 Spring 创建 Java 配置文件。在这个文件 中， 先新建 Server
 * EndpointExporter 对象 ， 通过它可以定义 WebSocket 服务器的端点 ， 这样客户端就能请求服务器 的
 * 端点，其内容如代码清单,有了这个 Bean ，就可以使用＠ServerEndpoint 定义一个端点服务类。
 * 在这个站点服务类中，还可以定义 WebSocket 的打开 、关闭 、错误和发送消息的方法。
 */
@Configuration
public class WebSocketConfig {

    /**创建服务器端点*/
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

3.创建webSocket

@ServerEndpoint("/ws")
@Service
public class WebSocket {

/**
     *    这里稍微解释一下这些主要注解的作用 。
     *   • @ServerEndpoint("/ws") ：
     *     表示让 Spring 创建 WebSocket 的服务端点 ，其中请求地址是“／ws”。
     *   • @OnOpen：
     *     标注客户端打开 WebSocket 服务端点调用方法。
     *   • @OnClose ： 
     *     标注客户端关 闭 WebSocket 服务端点调用方法。
     *   • @OnMessage ： 
     *     标注客户端发送消息， WebSocket 服务端点调用方法。
     *   • @OnError：
     *     标注客户 端请求 WebSocket 服务端点发生异常调用 方法。
     * 因为每一个客户端打开时，都会为其创建一个 WebSocket 对象，所以这里的打开方
     * 法中都会去计数并且将这个对象保存到 CopyOnWriteArraySet 中，这样就可以知道拥有多少连接。对
     * 于关 闭方法则是清除这个对象，并且计数减一。对于消息发送方法 ，则是通过轮询对所有的客户端
     * 连接都给予发送消息，所以所有的连接都可以收到这个消息。但是有时候可能只 是需要发送给特定13.4 WebSocket 应用 309
     * 的用户，则需要得到用户的信息，然后再发送给特定的用户 。
     */

    /**静态变量，用来记录当前在线连接数 。 应该把它设计成线程安全的*/
    private static int onlineConunt = 0;

    /**oncurrent 包的线程安全 Set ，用来存放每个客户端对应的 WebSocketServiceimpl 对象*/
    private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();

    /**与某个客户端的连接会话，需要通过它来给客户端发送数据*/
    private Session session;

    /** 连接建立成功调用的方法 */
    @OnOpen
    public void onOpen(Session session){
        this.session = session;
        //加入 set 中
        webSocketSet.add(this);
        //在线数加1
        addOnlineCount();
        System.out.println("有新连接加入！当前在线人数为："+getOnlineConunt());
        try {
            sendMessage("有新的连接加入了！！");
        } catch (IOException e) {
            System.out.println("IO异常");
        }

    }
    //连接关闭调用的方法
    @OnClose
    public void onClose(){
        //从set中删除
        webSocketSet.remove(this);
        //在线数减1
        subOnlineCount();
        System.out.println("有一连接关闭！当前在线人数为："+getOnlineConunt());
    }
    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session
     */
    @OnMessage
    public void onMessage(String message,Session session){
        System.out.println("来自客户端的消息："+message);
        //群发消息
        for(WebSocket item : webSocketSet){
            //获取当前用户名称
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                System.out.println("发送消息异常");
            }
        }
    }
    //发送错误时调用
    @OnError
    public void onError(Session session,Throwable error){
        System.out.println("发送错误");
        error.printStackTrace();
    }

    /**
     * 发送消息
     * @param message 客户端消息
     * @throws IOException
     */
    private void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }
    //返回在线数
    private static synchronized int getOnlineConunt() {
        return onlineConunt;
    }
    //当连接人数增加时
    private static synchronized void addOnlineCount() {
        WebSocket.onlineConunt ++;
    }
    //当连接人数减少时
    private static synchronized void subOnlineCount() {
        WebSocket.onlineConunt --;
    }
}

浏览器端：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

	var ws = null;
	if('WebSocket' in window){
		alert("你的浏览器支持 WebSocket");
		ws = new WebSocket("ws://localhost:9999/ws");
	} else {
		alert('你的浏览器不支持webSocket');
	}
	//建立成功建立的回调方法
	ws.onopen = function(event){
		alert("消息已发送")
		appendMessage("open");
	}
	//接收到消息的回调方法
	ws.onmessage = function(event){
		alert("接收到服务端发的消息")
		appendMessage(event.data);
	}
	//连接关闭的回调方法
	ws.onclose = function(){
		alert("连接已关闭")
		appendMessage("close");
	}
	//连接发送错误的回调方法
	ws.onerror = function(){
		alert("连接发送错误")
		appendMessage("error");
	}
	
	//监听窗口关闭事件，当窗口关闭时，主动关闭webSocket连接
	//防止连接还没断开就关闭窗口，server端会抛异常
	ws.onbeforeunload = function(){
		alert("窗口关闭了，关闭socket连接")
		ws.onclose();
	}
	
	//将消息显示在网页上
	function appendMessage(message){
		var context = $("#context").html() +"<br/>" +message;
		$("#context").html(context);
	}
	//关闭连接
	function closeWebSocket(){
		ws.close();
	}
	//发送消息
	function sendMessage(){
		var message = $("#message").val();
		ws.send(message);
	}
	
</script>
</head>
<body>
	 
	<!--  <button onclick="webSocketTest()" >运行 WebSocket连接</button> -->
	<input id="message" type="text"/>
	<button onclick="sendMessage()" >发送消息</button>
	<button onclick="closeWebSocket()" >关闭连接</button>
	<div id="context"></div>
	
</body>

</html>