使用websocket与redis实现主动推送数据（附配置）
第一次写博客，写的不好，将就看
先介绍一下整体项目，有一个数据接收服务器，一个数据展示服务器，所以使用redis来推送数据，本博客是介绍如何使用websocket与redis来实现主动的数据推送，框架部分使用Springboot,数据库使用mysql,数据库中间件使用ShardingSphere(顺便吐槽一下ShardingSpaere不支持子查询的问题)，，本文中会把功能如何实现，配置，思路等都写出来，也是防止自己时间长忘记了。
前段获取数据的几种方式
前端主动获取
一种就是前段主动获取数据，这种方式有很多，axios,jq,dwr，等等，有很多，我就不一一说明了，这种获取方式的特点就是后端被动（思想转变过来），只能由前端发起请求，后端被动的返回数据，平常情况下很好使，但是遇到需要实时获取数据的就有点麻烦，ajax虽然可以实时获取，但他也是采用寻轮的方式，通过不断的往后端发送请求来返回数据，虽然缓存的存在，可以省去一点性能消耗，但是对后端也是一种很大的开销，特别是数据量大，查询时间长的情况下，现在我写的后台就是，ajax广大朋友们应该就有个差不多的认识，不说了。
前端被动获取
还一种就是前端被动获取数据，这种方式我主要使用的的websocket来实现，特备适合于数据推送，节约性能消耗，websocket,采用ws协议，跟普通的http,https有很大的不同，当然ws协议也就安全的wss,对协议感兴趣的可以自行百度。废话不多少，上代码。
1.webscoket前端代码，数据是从thymleaf里面获取的，里面掺杂了我自己的代码逻辑，等下会贴出精简部分
yml里的webscoket路径配置下面代码会用到
#你自己的websocket路径
webscoketUrl:
url: ws://*.*.*.com/websocket
`
<script th:inline="javascript">
var wensocketUrl = [[${websocketUrl}]];
var websocket = null;
var Pressurearr = [];
var Battery = [];
var CH4arr = [];
var Humiturearr = [];
var Warnarr = [];
var SignalIntensityarr = [];
var Locationarr = [];
var converdata = {};
function createJson(prop, val) {
// 如果 val 被忽略
if(typeof val === "undefined") {
// 删除属性
delete converdata[prop];
}else {
// 添加 或 修改
converdata[prop] = val;
}
}
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket(wensocketUrl);
} else{
alert('Not support websocket!当前浏览器版本过低，请使用高版本浏览器')
}
//连接发生错误的回调方法
websocket.onerror = function(){
alert("error:websocket连接发生问题！请检查网络连接！");
};
//连接成功建立的回调方法
websocket.onopen = function(event){
console.log("open：连接已打开");
}
//接收到消息的回调方法
websocket.onmessage = function(event){
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function(){
console.log("close");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
websocket.close();
}
//将消息显示在网页上
function setMessageInnerHTML(data){
// document.getElementById('message').innerHTML += innerHTML + '<br/>';
var jsonlist = JSON.parse(data);
if (jsonlist[0]=="Pressure"){
//Pressurearr.push(jsonlist[1]);
}else if(jsonlist[0]=="Battery"){
//Battery.push(jsonlist[1]);
var a = jsonlist[1].substr(1,jsonlist[1].length-2);
var ch4data = JSON.parse(a);
var redisdeviceid = ch4data.deviceId;
createJson("batteries",JSON.parse(jsonlist[1].substr(1,jsonlist[1].length-2)));
if (typeof converdata.signalIntensities!="undefined"&&typeof converdata.warns!="undefined"){
changeicondata(converdata);
for (var i = 0; i <deviceidArray.length ; i++) {
if (redisdeviceid == deviceidArray[i]){
if (resultPoint.length==deviceidArray.length){
$("#devicenum_cc").text("NO:"+deviceNumArray[i]);
}
}
}
}
}else if(jsonlist[0]=="CH4"){
//console.log("CH4数据"+jsonlist);
CH4arr.push(jsonlist[1]);
//console.log(jsonlist[1]);
var a = jsonlist[1].substr(1,jsonlist[1].length-2);
var ch4data = JSON.parse(a);
var sys_norm = [[${sysNorm}]];
var safety = sys_norm.safety;
var min_worn = sys_norm.minWarn;
var max_worn = sys_norm.maxWarn;
var redisdeviceid = ch4data.deviceId;
//如果数据小于安全数据
if (ch4data.concentration<safety){
//如果数据处于警戒位
}else if(min_worn<=ch4data.concentration&&ch4data.concentration<max_worn){
for (var i = 0; i <deviceidArray.length ; i++) {
if (redisdeviceid == deviceidArray[i]){
if (resultPoint.length==deviceidArray.length){
// map.clearOverlays();
// var myIcon;
// //myIcon = new BMap.Icon("/img/red_point.png", new BMap.Size(32,32));
// myIcon = new BMap.Icon("/img/yellow_point.png", new BMap.Size(32,32));
// //myIcon = new BMap.Icon("/img/blue_point.png", new BMap.Size(32,32));
// var marker = new BMap.Marker(resultPoint[i],{icon:myIcon});
// marker.addEventListener("click", showInfo);
}
}
}
//如果数据处于报警位
}else if (ch4data.concentration>=max_worn){
for (var i = 0; i <deviceidArray.length ; i++) {
if (redisdeviceid == deviceidArray[i]){
if (resultPoint.length==deviceidArray.length){
// var myIcon;
// myIcon = new BMap.Icon("/img/red_point.png", new BMap.Size(32,32));
// //myIcon = new BMap.Icon("/img/yellow_point.png", new BMap.Size(32,32));
// //myIcon = new BMap.Icon("/img/blue_point.png", new BMap.Size(32,32));
// var marker = new BMap.Marker(resultPoint[i],{icon:myIcon});
// marker.addEventListener("click", showInfo);
$("#errorModleid").show();
//console.log("设备编号："+deviceNumArray[i]);
$("#devicenumerror").text("NO:"+deviceNumArray[i]);
playaudio();
$.get("/weixinTemplate/templateInfomation?devicenum="+deviceNumArray[i],function (data) {
})
}
}
}
}
}else if(jsonlist[0]=="Humiture"){
//Humiturearr.push(jsonlist[1]);
}else if(jsonlist[0]=="Warn"){
//Warnarr.push(jsonlist[1]);
var a = jsonlist[1].substr(1,jsonlist[1].length-2);
var ch4data = JSON.parse(a);
var redisdeviceid = ch4data.deviceId;
createJson("warns",JSON.parse(jsonlist[1].substr(1,jsonlist[1].length-2)));
if (typeof converdata.signalIntensities!="undefined"&&typeof converdata.batteries!="undefined"){
changeicondata(converdata);
for (var i = 0; i <deviceidArray.length ; i++) {
if (redisdeviceid == deviceidArray[i]){
if (resultPoint.length==deviceidArray.length){
$("#devicenum_cc").text("NO:"+deviceNumArray[i]);
}
}
}
}
}else if(jsonlist[0]=="SignalIntensity"){
//SignalIntensityarr.push(jsonlist[1]);
var a = jsonlist[1].substr(1,jsonlist[1].length-2);
var ch4data = JSON.parse(a);
var redisdeviceid = ch4data.deviceId;
createJson("signalIntensities",JSON.parse(jsonlist[1].substr(1,jsonlist[1].length-2)));
if (typeof converdata.warns!="undefined"&&typeof converdata.batteries!="undefined"){
changeicondata(converdata);
for (var i = 0; i <deviceidArray.length ; i++) {
if (redisdeviceid == deviceidArray[i]){
if (resultPoint.length==deviceidArray.length){
$("#devicenum_cc").text("NO:"+deviceNumArray[i]);
}
}
}
}
}else if(jsonlist[0]=="Location"){
//Locationarr.push(jsonlist[1]);
}
}
//关闭连接
function closeWebSocket(){
websocket.close();
}
//发送消息
// function send(){
// var message = document.getElementById('text').value;
// websocket.send(message);
// }
</script>`
前端精简websocket代码
<script type="text/javascript">
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
//路径里的ws不要换，如果是安全协议可以使用wss,
//顺带说明ngrok跟nginx需要单独配
//路径写你websocket的路径，后面会有
websocket = new WebSocket("ws://localhost:8080/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();
}
}
else {
alert('当前浏览器 Not support websocket')
}
};
//将消息显示在网页上
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>
前端到这就结束了，开始后端配置，定义配置类
package com.zkjh.subservice_web.iot.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
package com.zkjh.subservice_web.iot.config;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
//前端路径
@ServerEndpoint(value = "/websocket")
@Component
@Slf4j
public class WebSocketServer {
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
/**
* 收到客户端消息后调用的方法
* 在此处已预留可以添加需要推送的硬件信息 目前来看项目不需要选择推送温湿度，浓度，压强等数据
* @param message 客户端发送过来的消息
* @functionname onMassage
* @author zhp
* */
@OnMessage
public void onMessage(String message, Session session) {
//群发消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
synchronized (session) {
this.session.getBasicRemote().sendText(message);
}
}
/**
* 群发自定义消息
* */
public static void sendInfo(String message) {
log.info("推送消息到窗口");
for (WebSocketServer item : webSocketSet) {
try {
//这里可以设定全部推送
item.sendMessage(message);
} catch (IOException e) {
continue;
}
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("websocket发生错误" + error);
error.printStackTrace();
}
@OnOpen
public void onOpen(Session session) {
this.session = session;
webSocketSet.add(this); //加入set中
log.info("websocket:有新连接开始监听!");
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除
log.info("连接关闭！");
}
}
websocket后端配置结束
redis配置
package com.zkjh.subservice_web.iot.config;
import com.fasterxml.jackson.annotation.JsonAutoDetect;
import com.fasterxml.jackson.annotation.PropertyAccessor;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.springframework.cache.annotation.CachingConfigurerSupport;
import org.springframework.cache.annotation.EnableCaching;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.*;
import org.springframework.data.redis.serializer.Jackson2JsonRedisSerializer;
import org.springframework.data.redis.serializer.StringRedisSerializer;
@Configuration
@EnableCaching
public class RedisConfig extends CachingConfigurerSupport {
/**
* retemplate相关配置
* @param factory
* @return
*/
@Bean
public RedisTemplate<String, Object> redisTemplate(RedisConnectionFactory factory) {
RedisTemplate<String, Object> template = new RedisTemplate<>();
// 配置连接工厂
template.setConnectionFactory(factory);
//使用Jackson2JsonRedisSerializer来序列化和反序列化redis的value值（默认使用JDK的序列化方式）
Jackson2JsonRedisSerializer jacksonSeial = new Jackson2JsonRedisSerializer(Object.class);
ObjectMapper om 
最低0.47元/天 解锁文章
扫一扫
4582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
