SpringBoot使用WebSocket推送消息到浏览器

最新推荐文章于 2024-07-30 11:12:50 发布

weixin_34006965

最新推荐文章于 2024-07-30 11:12:50 发布

阅读量738

点赞数

文章标签：网络 java 前端 ViewUI

原文链接：https://my.oschina.net/u/1993676/blog/2209446

版权

2019独角兽企业重金招聘Python工程师标准>>>

WebSocket

简介

WebSocket协议支持（在受控环境中运行不受信任的代码的）客户端与（选择加入该代码的通信的）远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。协议包括一个开放的握手以及随后的TCP层上的消息帧。该技术的目标是为基于浏览器的、需要和服务器进行双向通信的（服务器不能依赖于打开多个HTTP连接（例如，使用XMLHttpRequest或<iframe>和长轮询））应用程序提供一种通信机制。

实现原理

在实现websocket连线过程中，需要通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” 。在 WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：

1. Header

互相沟通的Header是很小的-大概只有 2 Bytes

2. Server Push

服务器的推送，服务器不再被动的接收到浏览器的请求之后才返回数据，而是在有新数据时就主动推送给浏览器。

HTML5 API

在HTML5中内置有一些API，用于响应应用程序发起的请求。基本API语句如下：
创建对象
1
var ws = new WebSocket(url,name);
url为WebSocket服务器的地址，name为发起握手的协议名称，为可选择项。
发送文本消息
ws.send(msg);
msg为文本消息，对于其他类型的可以通过二进制形式发送。

接收消息
ws.onmessage = (function(){...})();

错误处理
ws.onerror = (function(){...})();

关闭连接
ws.close();

SpringBoot-WebSocket使用

引入

在pom文件中引入WebSocket相关jar包

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>

配置

/**
 *  WebSocket 配置
 */
@Configuration
public class WebSocketConfig {

	@Bean
	public ServerEndpointExporter serverEndpointExporter(){
		return new ServerEndpointExporter();
		
	}
}

服务端连接

import cn.hutool.core.collection.CollectionUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import javax.annotation.Nullable;
import javax.annotation.Resource;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * WebSocket 服务器
 */
@Component
@Slf4j
@ServerEndpoint("/ws/{userId}")
public class WebSocketServer {
    private static final AtomicInteger OnlineCount = new AtomicInteger(0);
    // concurrent包的线程安全Set，用来存放每个客户端对应的Session对象。
    private static CopyOnWriteArraySet<WebSocketServer> socketServers = new CopyOnWriteArraySet<WebSocketServer>();

    //用户id 
    private Long userId;

    //当前会话
    private Session session;



    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(@PathParam("userId")Long userId, Session session) {
        socketServers.add(this);
        this.session=session;
        System.out.println(session.toString());
        this.userId=userId;
        int cnt = OnlineCount.incrementAndGet(); // 在线数加1
        log.info("有连接加入，当前连接数为：{}", cnt);
        try {
            sendMessage("连接服务器成功");
        } catch (IOException e) {
            log.error("连接IO异常:{}",e.getMessage());
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(Session session) {
        socketServers.remove(this);
        int cnt = OnlineCount.decrementAndGet();
        log.info("有连接关闭，当前连接数为：{}", cnt);
    }


    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
        //群发消息
        for (WebSocketServer item : socketServers) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    /**
     * 发送消息，实践表明，每次浏览器刷新，session会发生变化。
     * @param message
     */

    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


    /**
     * 出现错误
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误：{}，Session ID： {}",error.getMessage(),session.getId());
        error.printStackTrace();
    }

    /**
     *  给某个具体的用户推送消息
     * @param message
     * @param userId
     * @throws IOException
     */
    public  void sendMessageTo(@Nullable String message,@Nullable Long userId){


        for(WebSocketServer item :socketServers){
            if(item.userId.equals(userId)){
                try {
                    item.session.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    log.error("推送消息:{} 给用户{}出现IO异常",message,userId);
                }
            }
        }
    }

}

客户端连接

	//登录成功后 进入主页面，连接服务器websocket 接收服务器推送过来的消息
			connectWebSocket(userId);	
			function connectWebSocket(){
				
				var websocket = null;
				 //判断当前浏览器是否支持webSocket
				 if('WebSocket' in window){
				
				   websocket = new WebSocket("ws://127.0.0.1:8080/ws/"+userId);
				 }else{
					 alert("您的浏览器不支持网页消息推送");
				 }
				 
				 // 链接发生错误的回调方法
				  websocket.onerror = function(){
					  console.log("error");
				  }
				 // 链接成功建立的回调方法
				 websocket.onopen = function(event){
				   console.log("open");
				 }
				 // 接受到消息的回调方法
				 websocket.onmessage = function(event){
				 //在这里将服务器推送过来的消息 根据自己的业务进行处理
				  console.log(event.data);
						
				 }
				 // 链接关闭的回调方法
				websocket.onclose = function(){
					console.log("close");
				}

				//监听窗口关闭事件，当窗口关闭时，主动关闭wesocket 链接，防止链接还没断开就关闭窗口，server端会抛异常。
				window.onbeforeunload = function(){
					websocket.close();
				}
				
				
				// 关闭链接
				function closeWebSocket(){
					websocket.close();
				}
			 
		}