websocket 本地可以服务器断开 springboot linux_SpringBoot+WebSocket实现简单的数据推送...

本文介绍了WebSocket作为HTTP协议的补充,解决了服务器主动推送数据的问题,减少了资源浪费。通过SpringBoot创建WebSocket项目,详细讲解了配置、服务端接口和前端页面的实现,最后提到了WebSocket的点对点推送和广播应用,并分享了代码资源。
摘要由CSDN通过智能技术生成

问题背景

为什么要要用websocket呢?websocket相对于传统http协议有什么优势呢?

  • http协议有一个缺陷,就是通信只能由客户端发起,服务器返回数据,不能做到服务器主动向客户端推送。这就导致了一个弊端,假如我要获得服务器连续的状态变化,那么我只能每隔一段时间向服务器发起请求,也就是所谓的轮询,这就导致了大量的资源浪费。由此,websocket应运而生,来解决这一痛点。
  • websocket使用tcp连接保持全双工通信协议,服务器端比较容易实现;
  • 数据格式比较轻量,通信比较高效;
  • 既能发送文本,也能发送二进制数据,没有同源限制;
  • wbsocket响应报文与http不同,如下
565e7c6b8fc38446f59313452a0288e3.png

websocket响应报文

好了,简单的了解一下,我们来看看springboot+websocket实现推送的过程,以下是个简单的demo。

搭建过程

  • 首先我们初始化一个spring boot项目,大家可以根据自己的习惯去官网下载或者用idea来生成,这里我不多说,主要的是引入websocket依赖,如下图;
a1f29348b7693e1787c70c81c05d7e90.png

websocket依赖

  • 编写websocket配置类,这里直接new 一个ServerEndpointExporter就行了
@Componentpublic class WebSocketConfig {    @Bean    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();    }}
  • 编写websocket推送服务端
@Component@ServerEndpoint(value = "/websocket/logging")public class LoggingWSServer {    private static final Logger LOGGER = LoggerFactory.getLogger(LoggingWSServer.class);    private static Map sessionMap = new ConcurrentHashMap<>();    private static Gson gson = new Gson();    private static Map map = new ConcurrentHashMap<>();    @OnOpen    public void onOpen(Session session) {      new Thread(() -> {// 这里大家可以根据业务来优化,使用线程池等手段            while(sessionMap.get(session.getId()) != null) {                try {                    List list = aaaServerService.findList();                    if(session.isOpen()) {                        send(session, gson.toJson(list));                    }                    Thread.sleep(5000);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        }).start();    }        @OnClose    public void onClose(Session session) {        sessionMap.remove(session.getId());        LOGGER.info("session断开连接:{}" , session.getId());    }    @OnMessage    public void onMessage(String message,Session session) {        LOGGER.info("收到客户端的消息:{}",message);        map.put("ret",message);        send(session,gson.toJson(map));    }    private void send(Session session, String toJson) {        try {            session.getBasicRemote().sendText(toJson);        } catch (IOException e) {            LOGGER.error("发送错误:{}",e.getMessage());        }    }  }

服务端api解释:

  • OnOpen:在这个端点连接时被调用;
  • OnClose:与OnOpen相反,连接断开时被调用
  • OnMessage:服务端收到客户端的信息时被调用
  • OnError:当然还有这个,上面没有列出,这是发送错误时被调用
  • 编写前端页面,这里只展示js
    //websocket对象    var websocket = null;    //判断当前浏览器是否支持WebSocket    if ('WebSocket' in window) {        //动态获取域名或ip        var hostname = window.location.hostname;        port = window.location.port;        websocket = new WebSocket("ws://"+hostname+":" + port + "/websocket/logging");    } else {        console.error("不支持WebSocket");    }    //连接发生错误的回调方法    websocket.onerror = function (e) {        console.error("WebSocket连接发生错误" + e);    };    //连接成功建立的回调方法    websocket.onopen = function () {        console.log("WebSocket连接成功")    };    //接收到消息的回调方法    websocket.onmessage = function (event) {        console.log("数据是:", event.data );        var data = JSON.parse(event.data);        if (data.push) {            // 内容            var temp = template('tpl_data',{data : data.push});            console.log("模板==" + temp);            document.getElementById("tb").innerHTML = temp;        }        if(data.ret) {            console.log(data.ret)            alert(data.ret);        }    }    //发送消息    $('#send').click(function () {        websocket.send($('#sMsg').val());    });

前端页面注意

  • 编写的时候一定要注意一个地方,就是new WebSocket 的地址,一定要和服务端推送的那个地址相同,不然的话,这里接收不到推送过来的数据。
  • 另外,有些浏览器可能不支持websocket,也没关系,可以使用sockjs或者stomp.js,这是基于websocket的上层协议,大家可以自行去了解以下。不过要注意,sockjs 处理的url是http或者https,不在是以ws开头的。

结语

今天就简单的介绍到这里,有需要这个demo的,可以关注一下小编,后续小编会把代码上传到gitee,https://gitee.com/bigqianqian/springboot-websocket,可以了解下。下篇文章小编将会介绍websocket点对点推送和广播,喜欢的朋友点个关注呗[奋斗][奋斗][奋斗],也可以动动手评论下,留下你的理解,小编与你共同成长!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值