工作中有这样一个需示,我们把项目中用到代码缓存到前端浏览器IndexedDB里面,当系统管理员在后台对代码进行变动操作时我们要更新前端缓存中的代码怎么做开始用想用版本方式来处理,但这样的话每次使用代码之前都需要调用获取版本API来判断版本是否有变化来是否更新本地代码,这样的话对服务器造成很大的压力。后来考虑http慢轮讯方式,最后了解到WebSocket这简直是神器,以后还可用来扩展项目中的即时聊天功能。

WebSocket是什么

我们知道HTTP协议都是先由浏览器向服务器发送请求,服务器响应这个请求,再把数据发送给浏览器。 如果需要服务器发送消息给浏览器怎么办 WebSocket是HTML5新增的协议,让浏览器和服务器之间可以建立无限制的全双工通信,任何一方都可以主动发消息给对方。

SpringBoot-Websocket-Demo

项目介绍

  • springboot 2.1.6.RELEASE

  • spring-boot-starter-websocket

  • 本项目主要为了测试springboot集成websocket实现向前端浏览器发送一个对象,发送消息操作手动触发。

代码已上传到github 传送门 https://github.com/devmuyuer/SpringBoot-Websocket-Demo

代码说明

  • 1.新建spingboot项目

  • 2.加入WebSocket依赖

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

    开启WebSocket支持
package com.example.socket;

/**
* @author muyuer 182443947@qq.com
* @version 1.0
* @date 2019-07-22 18:16
*/ import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter; /**
* 开启WebSocket支持
* @author zhengkai
*/
@Configuration
public class WebSocketConfig { @Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
} }
  • 4.WebSocketServer

    WebSocket采用ws协议,这里的WebSocketServer类似于一个ws协议的Controller
package com.example.socket;

import cn.hutool.json.JSONUtil;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import cn.hutool.log.Log;
import cn.hutool.log.LogFactory; /**
* @author muyuer 182443947@qq.com
* @version 1.0
* @date 2019-07-22 18:17
*/
@ServerEndpoint("/web/socket/{sid}")
@Component
public class WebSocketServer { static Log log=LogFactory.get(WebSocketServer.class);
/**
* 静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
*/
private static int onlineCount = 0;
/**
* concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
*/
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>(); /**
* 与某个客户端的连接会话,需要通过它来给客户端发送数据
*/
private Session session; /**
* 接收sid
*/
private String sid="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session,@PathParam("sid") String sid) {
this.session = session;
//加入set中
webSocketSet.add(this);
//在线数加1
addOnlineCount();
log.info("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount());
this.sid=sid;
try {
sendMessage("连接成功");
} catch (IOException e) {
log.error("websocket IO异常");
}
} /**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this);
subOnlineCount();
log.info("有一连接关闭!当前在线人数为" + getOnlineCount());
} /**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到来自窗口"+sid+"的信息:"+message);
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
} /**
*
* @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 void sendMessage(SocketMessage message) throws IOException {
this.session.getBasicRemote().sendText(JSONUtil.toJsonStr(message));
} /**
* 群发自定义消息
* */
public static void sendInfo(SocketMessage message,@PathParam("sid") String sid) throws IOException {
log.info("推送消息到窗口"+sid+",推送内容:"+message);
for (WebSocketServer item : webSocketSet) {
try {
if(sid==null) {
item.sendMessage(message);
}else if(item.sid.equals(sid)){
item.sendMessage(message);
}
} catch (IOException e) {
continue;
}
}
} public static synchronized int getOnlineCount() {
return onlineCount;
} public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
} public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
}
  • 5.WebSocketController

    测试用api 可在项目中调用 WebSocketServer.sendInfo(newMessage,cid);推送消息
package com.example.socket;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView; import java.io.IOException;
import java.util.Date; /**
* @author muyuer 182443947@qq.com
* @version 1.0
* @date 2019-07-22 18:19
*/
@Controller
@RequestMapping("/web/socket")
public class WebSocketController { /**
* 页面请求
* @param cid
* @return
*/
@GetMapping("/{cid}")
public ModelAndView socket(@PathVariable String cid) {
ModelAndView mav=new ModelAndView("/socket");
mav.addObject("cid", cid);
return mav;
} /**
* 推送数据接口
* @param cid
* @param message
* @return
*/
@ResponseBody
@RequestMapping("/send/")
public String pushToWeb(String cid,String message) {
try {
SocketMessage newMessage = new SocketMessage(message, new Date());
WebSocketServer.sendInfo(newMessage,cid);
} catch (IOException e) {
e.printStackTrace();
return cid+"#"+e.getMessage();
}
return cid;
}
}

-6. 前端调用代码

<!DOCTYPE HTML>
<html>
<head>
<title>My WebSocket</title>
</head> <body>
Welcome<br/>
<input id="text" type="text" /><button onclick="send()">Send</button> <button onclick="closeWebSocket()">Close</button>
<div id="message">
</div>
</body> <script type="text/javascript">
var websocket = null; //判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:8083/web/socket/20");
}
else{
alert('Not support websocket')
} //连接发生错误的回调方法
websocket.onerror = function(){
setMessageInnerHTML("error");
}; //连接成功建立的回调方法
websocket.onopen = function(event){
setMessageInnerHTML("open");
} //接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
} //连接关闭的回调方法
websocket.onclose = function(){
setMessageInnerHTML("close");
} //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
} //将消息显示在网页上
function setMessageInnerHTML(innerHTML){
document.getElementById('message').innerHTML += innerHTML + '<br/>';
} //关闭连接
function closeWebSocket(){
websocket.close();
} //发送消息
function send(){
var message = document.getElementById('text').value;
websocket.send(message);
}
</script>
</html>

测试

参考资料

springboot集成websocket实现向前端浏览器发送一个对象,发送消息操作手动触发的更多相关文章

  1. springboot集成websocket的两种实现方式

    WebSocket跟常规的http协议的区别和优缺点这里大概描述一下 一.websocket与http http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接也必须要有三次握手才能 ...

  2. SpringBoot集成websocket发送后台日志到前台页面

    业务需求 后台为一个采集系统,需要将采集过程中产生的日志实时发送到前台页面展示,以便了解采集过程. 技能点 SpringBoot 2.x websocket logback thymeleaf Rab ...

  3. springboot集成websocket实现大文件分块上传

    遇到一个上传文件的问题,老大说使用http太慢了,因为http包含大量的请求头,刚好项目本身又集成了websocket,想着就用websocket来做文件上传. 相关技术 springboot web ...

  4. SpringBoot集成WebSocket【基于纯H5】进行点对点[一对一]和广播[一对多]实时推送

    代码全部复制,仅供自己学习用 1.环境搭建 因为在上一篇基于STOMP协议实现的WebSocket里已经有大概介绍过Web的基本情况了,所以在这篇就不多说了,我们直接进入正题吧,在SpringBoot ...

  5. Springboot集成WebSocket通信全部代码,即扣即用。

    websocket通信主要来自两个类以及一个测试的html页面. MyHandler 和 WebSocketH5Config,下面全部代码 MyHandler类全部代码: package com.un ...

  6. SpringBoot集成WebSocket【基于STOMP协议】进行点对点[一对一]和广播[一对多]实时推送

    原文详细地址,有点对点,还有广播的推送:https://blog.csdn.net/ouyzc/article/details/79884688 下面是自己处理的一些小bug 参考原文demo,结合工 ...

  7. springboot集成websocket点对点推送、广播推送

    一.什么都不用说,导入个依赖先 <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  8. SpringBoot集成websocket(java注解方式)

    第一种:SpringBoot官网提供了一种websocket的集成方式 第二种:javax.websocket中提供了元注解的方式 下面讲解简单的第二种 添加依赖 <dependency> ...

  9. SpringBoot集成websocket(Spring方式)

    SpringWebSocketConfig配置 package com.meeno.chemical.socket.task.config; import com.meeno.chemical.soc ...

随机推荐

  1. Mycat搭建负载均衡,读写分离的Mysql集群

    Mycat搭建负载均衡,读写分离的Mysql集群 准备环境 1.mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz 2.Mycat-server-1.6.7.4-te ...

  2. Centos 添加 sudo 用户

    说明以下的 <username>字样 是 用户名 新增用户 # 终端命令 useradd <username> 举例: useradd <username> -s ...

  3. input 实现一次性上传文件

    在实际项目中可能会用到,上传多个文件请求一次接口,因此,主要代码 $('#tabList').on('click','.resetWorkStatus',function(){ var that = ...

  4. [转]C#对Excel报表进行操作(读写和基本操作)

    //1.添加引用-〉com-〉microsoft excel 11.0 //2.若出现错误:命名空间“Microsoft.Office”中不存在类型或命名空间名称“Interop”(是缺少程序集引用吗 ...

  5. Kotlin -help

    { kotlin: run Kotlin programs, scripts or REPL. Usage: kotlin <options> <command> <ar ...

  6. linux源码安装python及pip和django

    1安装编译工具 yum install zlib-devel bzip2-devel openssl-devel python-devel kernel-devel libffi-devel ncur ...

  7. NX二次开发-UFUN计时函数UF_begin_timer

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); //计时开始 UF_timer_t Timer ...

  8. FZU - 2295 Human life:网络流-最大权闭合子图-二进制优化-第九届福建省大学生程序设计竞赛

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 http://acm.fzu.edu.cn/problem.php?pid=2295 htt ...

  9. POJ2449-A*算法-第k短路

    (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 题意:传送门  原题目描述在最下面.  给你一个有向图,求指定节点间的第k短路. 思路:  先反向跑出从终点开始的到每个节点的最短距离 ...

  10. PostgreSQL/GREENPLUM关联更新

    update a_t AA set /*AA.*/ sqlstr = 'qqq' from a_t BB where aa.id <> BB.id and aa.name = BB.nam ...