SpringBoot 整合 Websocket 实现后台向前端推送信息

开发中有很多需求会用到后端异步通知前端实现消息通知,实现方式有很多种,这里简单说下 SpringBoot 整合 websocket 实现后台向前端推送信息简单实现,希望对你有用。

1、maven 依赖的引入



    org.springframework.boot
	spring-boot-starter-websocket

2、spring 中注入 @ServerEndpoint 创立 websocket endpoint

在你的 Booter 启动类里加入:

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

3、接下来就是写 websocket 的具体实现类,很简单,直接上代码:

@ServerEndpoint("/websocket/link")
@Component
public class WebSocket {

	private static Logger log = LoggerFactory.getLogger(WebSocket.class);

	// concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
	private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();

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

	/**
	 * 连接建立成功调用的方法
	 */
	@OnOpen
	public void onOpen(Session session) {
		this.session = session;
		webSocketSet.add(this); // 加入set中
	}

	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose() {
		webSocketSet.remove(this); // 从set中删除
	}

	/**
	 * 收到客户端消息后调用的方法
	 *
	 * @param message
	 *            客户端发送过来的消息
	 */
	@OnMessage
	public void onMessage(String message, Session session) {
		log.info("收到来自窗口的信息:" + message);
	}

	/**
	 * 发生错误
	 * 
	 * @param session
	 * @param error
	 */
	@OnError
	public void onError(Session session, Throwable error) {
		log.error("发生错误");
		error.printStackTrace();
	}

	/**
	 * 实现服务器主动推送
	 */
	public void sendMessage(String message) throws IOException {
		this.session.getBasicRemote().sendText(message);
	}

	/**
	 * 群发自定义消息
	 */
	public static void sendInfo(String string) throws IOException {
		log.info("推送消息到窗口" + string);
		for (WebSocket item : webSocketSet) {
			try {
				item.sendMessage(string);
			} catch (IOException e) {
				continue;
			}
		}
	}
}

4、开始测试,真的很简单

@Controller
@RequestMapping("/testWebsocket")
public class TestWebsocket {

	@ResponseBody
	@RequestMapping("/testWebsocket")
	public ResponseBean send() {
		try {
			WebSocket.sendInfo("");
			return ResponseBean.success("发送成功");
		} catch (IOException e) {
			e.printStackTrace();
			return ResponseBean.fail(1, "发送失败");
		}  
	}

}

5、前端代码

var socket;
		if (typeof (WebSocket) == "undefined") {
			console.log("遗憾:您的浏览器不支持WebSocket");
		} else {
			console.log("恭喜:您的浏览器支持WebSocket");
			//实现化WebSocket对象  
			//指定要连接的服务器地址与端口建立连接   
			//注意ws、wss使用不同的端口。我使用自签名的证书测试,  
			//无法使用wss,浏览器打开WebSocket时报错  
			//ws对应http、wss对应https。  
			//socket = new WebSocket("ws://localhost:8082/websocket/link");  
			var host = location.host;//获取主机名+端口号
			socket = new WebSocket("ws://" + host + "/websocket/link");
			//连接打开事件    
			socket.onopen = function() {
				console.log("Socket 已打开");
			};
			//收到消息事件    
			socket.onmessage = function(msg) {
				console.log("收到服务器消息事件 ...刷新完成.....", msg);
			};
			//连接关闭事件    
			socket.onclose = function() {
				console.log("Socket已关闭");
			};
			//发生了错误事件    
			socket.onerror = function() {
				console.log("Socket发生了错误");
			}
			//窗口关闭时,关闭连接  
			window.unload = function() {
				socket.close();
			};
		}

6、测试效果图如下

d8f1e59742cdb73cdee7e862185542110ce.jpg

3544486907ff019f29b6093ba91a11c14fe.jpg

 

总结:按照上面步骤实现起来很简单,具体实现需要根据自己的需求来分析,有兴趣的可以试试。

 

水平有限,若有问题请留言交流!

互相学习,共同进步 :) 转载请注明出处谢谢!

转载于:https://my.oschina.net/hp2017/blog/3079265

你可能感兴趣的:(SpringBoot 整合 Websocket 实现后台向前端推送信息)