当前位置:首页 > 技术分析 > 正文内容

Springboot下的WebSocket开发

ruisui883个月前 (03-17)技术分析13

今天遇到一个需求,需要对接第三方扫码跳转。一种方案是前端页面轮询后端服务,但是这种空轮询会虚耗资源,实时性比较差而且也不优雅。所以决定使用另一种方案,websocket。以前就知道websocket,属于全双工长连接,适合实时在线聊天,浏览器之间的协同编辑工作,多人在线游戏等场景。

但是一直没机会用,今天正好可以使用一下。


简单记录一下步骤,亲测可用。

  1. 引入依赖
      
          org.springframework.boot
          spring-boot-starter-websocket
      

springboot已经非常贴心的为我们编写好了starter

  1. 配置config
@Configuration
public class WebSocketConfig {

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

}

必须有这个config,把ws服务暴露出去。

  1. 编写webSocket server
@Slf4j
@Component
@ServerEndpoint("/webSocket/{id}")
public class MyWebSocket {
    /**
     * 静态变量 用来记录当前在线连接数
     */
    private static int onlineCount = 0;

    /**
     * 服务端与单一客户端通信 使用Map来存放 其中标识Key为id
     */
    private static ConcurrentMap webSocketMap = new ConcurrentHashMap<>();
    //不需要区分可使用set
    //private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();

    public static ConcurrentMap getWebSocketMap() {
        return webSocketMap;
    }

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

    /**
     * 连接建立成功调用的方法
     *
     * @param session 可选的参数 session为与某个客户端的连接会话 需要通过它来给客户端发送数据
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("id") String id) {
        this.session = session;

        webSocketMap.put(id, this);

        addOnlineCount();
        log.info("有新连接加入,当前在线数为" + getOnlineCount());
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        Map map = session.getPathParameters();
        webSocketMap.remove(Integer.parseInt(map.get("id")));

        subOnlineCount();
        log.info("有一连接关闭!当前在线数为" + getOnlineCount());
    }

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

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

    /**
     * 发送消息
     *
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        MyWebSocket.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        MyWebSocket.onlineCount--;
    }

}

4.编写测试页面

页面代码就不贴了,网上很多,需要的可以看github,地址在文章最后。就是一个按钮打开socket链接。一个按钮向后端发送消息。一个用来展示从服务端收到的消息的p标签。

点击发送消息后,

可以看到,server端已经接收到。


然后测试页面也可以接收到消息。我写了一个请求,触发一下sendMessage方法。

总结

websocket入门使用还是很简单的,也很有趣。可以用来写个在线聊天室demo。

源码地址:

技术笔记与开源分享

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2822.html

分享给朋友:

“Springboot下的WebSocket开发” 的相关文章

用IDEA开发如何用Git快速拉取指定分支代码?

1,准备空的文件夹,git init2,关联远程仓库,git remote add origin gitlab地址3,拉取远程分支代码,git pull origin 远程分支名再用IDEA打开项目即可...

面试被逼疯:聊聊Python Import System?

面试官一个小时逼疯面试者:聊聊Python Import System?对于每一位Python开发者来说,import这个关键字是再熟悉不过了,无论是我们引用官方库还是三方库,都可以通过import xxx的形式来导入。可能很多人认为这只是Python的一个最基础的常识之一,似乎没有可以扩展的点了,...

在vue项目中封装WebSockets请求

在Vue项目中封装WebSocket请求包括以下步骤:1. 安装WebSocket库:首先,导入WebSocket库,例如`vue-native-websocket`或`socket.io-client`。根据项目需求选择适当的库,并根据官方文档进行安装和配置。2. 创建WebSocket服务:在V...

three.js cannon.js物理引擎之齿轮动画

今天继续说一说cannon.js物理引擎,并用之前已经学习过的知识实现一个小动画,知识点包括ConvexPolyhedron多边形、Shape几何体、Body刚体、HingeConstraint铰链约束等等知识。因为我之前用纯three.js 的THREEBSP实现过一个静态的齿轮,现在就想配合ca...

面试官:如何关闭一个 TCP 连接?

今天聊一个比较轻松的问题:如何关闭一个 TCP 连接?可能大家第一反应是「杀掉进程」不就行了吗?是的,这个是最粗暴的方式,杀掉客户端进程和服务端进程影响的范围会有所不同:在客户端杀掉进程的话,就会发送 FIN 报文,来断开这个客户端进程与服务端建立的所有 TCP 连接,这种方式影响范围只有这个客户端...

gin-vue-admin 基于vue和gin 搭建的后台管理系统脚手架

项目地址:https://github.com/piexlmax/gin-vue-admingin-vue-admin gin+vue开源快速项目模板更新代码后如果遇到前端报错请执行 npm i 前端开发会不定期增加新的依赖 请注意更新重构记录2019年12月12日 17:15...