专栏首页方法论WebSocket在Spring Boot中的使用

WebSocket在Spring Boot中的使用

前言

“WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。”

——《菜鸟教程》

简而言之,WebSocket是实现服务端主动向客户端推送数据的一项技术,它使用ws协议实现。

它的实现过程是这样的:客户端首先发起一个ws请求,这个请求最好能包含一个id(服务器将根据这个id将数据推送至客户端),当请求成功后,客户端将和服务端建立起一个通道,客户端可通过此通道像服务端发送数据,服务端同样可以根据id向该客户端下发数据。

在Spring Boot中实现WebSocket功能还是比较容易的,具体过程如下:

1.首先在pom文件中引入相关依赖

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

2.开启Spring Boot对websocket的支持

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

3.编写websocket业务处理类

@Slf4j
@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {
    //静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。
    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;
        webSocketSet.add(this);     //加入set中
        addOnlineCount();           //在线数加1
        log.info("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount());
        this.sid=sid;
        try {
           sendMessage(1,"连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
        }
    }
    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        log.info("有一连接关闭!当前在线人数为" + getOnlineCount());
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息*/
    @OnMessage
    public void onMessage(String message, Session session) {
      log.info("收到来自窗口"+sid+"的信息:"+message);
        //群发消息
        for (WebSocketServer item : webSocketSet) {
            try {
                item.sendMessage(1,message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }
  /**
   * 实现服务器主动推送
   */
    public void sendMessage(int code,String message) throws IOException {
        JSONObject messageResult = new JSONObject();
        messageResult.put("code",code);
        messageResult.put("message",message);
        this.session.getBasicRemote().sendText(messageResult.toString());
    }
    /**
     * 群发自定义消息
     * */
    public static void sendInfo(int code,String message,@PathParam("sid") String sid) throws IOException {
      log.info("推送消息到窗口"+sid+",推送内容:"+message);
        for (WebSocketServer item : webSocketSet) {
            try {
              //这里可以设定只推送给这个sid的,为null则全部推送
              if(sid==null) {
                item.sendMessage(code,message);
              }else if(item.sid.equals(sid)){
                item.sendMessage(code,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--;
    }
    @Data
    static class MessageResult{
        private int code;
        private String message;
    }
}

4.编写前端代码

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="utf-8">
 <title>websocket</title>
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="sse">
 <p>message:<input id="info"/><button onclick="sendMessage()">发送</button></p>
 <textarea name="messagebox" id="messagebox" cols="30" rows="10">
 </textarea>
</div>
</body>
<script type="text/javascript">
     var ipaddr = "localhost:8091";
     var userId = 1234;
     var messageValue = "";
     // 打开一个 web socket
     var ws = new WebSocket("ws://" + ipaddr + "/websocket/" + userId);
     function WebSocketTest() {
       if ("WebSocket" in window){
         // alert("您的浏览器支持 WebSocket!");
         ws.onmessage = function (evt){
         var received_msg = $.parseJSON(evt.data);
         console.log(received_msg);
         console.log("code:" + received_msg.code);
         console.log("message:" + received_msg.message);
         messageValue = messageValue + "\n" +received_msg.message;
          $("#messagebox").val(messageValue);
         // alert("数据已接收...");
         };
         ws.onclose = function(){
         // 关闭 websocket
         alert("连接已关闭...");
         };
       }
       else{
         // 浏览器不支持 WebSocket
         alert("您的浏览器不支持 WebSocket!");
       }
     }
     WebSocketTest();
     function sendMessage(){
        // Web Socket 已连接上,使用 send() 方法发送数据
        ws.send($("#info").val());
        console.log("数据发送中..." + $("#info").val());
     }
</script>
</html>

5.编写服务端控制器代码

@Api(description = "Websocket控制器")
@RestController
@RequestMapping("/messagecenter")
public class WebsocketController {

  //页面请求
  @GetMapping("/socket/{cid}")
  public ModelAndView socket(@PathVariable String cid) {
    ModelAndView mav=new ModelAndView("/socket");
    mav.addObject("cid", cid);
    return mav;
  }

  //推送数据接口
  @ResponseBody
  @GetMapping("/socket/push/{cid}")
  public ServerResponse pushToWeb(@PathVariable String cid,String message) {
    try {
      WebSocketServer.sendInfo(200,message,cid);
    } catch (IOException e) {
      e.printStackTrace();
      return ServerResponse.createByErrorMessage(cid+"#"+e.getMessage());
    }
    return ServerResponse.createBySuccess(cid);
  }
}

6.运行结果如图1-1所示

图1-1 websocket运行结果图

本文分享自微信公众号 - 小诸葛的博客(haibojishu),作者:南风奇缘

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Spring Boot用户关注公众号获取用户openid案例

    在进行微信公众号开发中,有时我们需要获取粉丝的openid,以此完成一些业务的处理,例如:向指定用户推送模板消息,那么怎么获取用户的openid呢?...

    小诸葛
  • MySQL的逻辑架构

    和其他数据库系统相比, MySQL有点与众不同,它的架构可以在多种不同场景中应用并发挥好的作用,但同时也会带来一点选择上的困难。MySQL并不完美,...

    小诸葛
  • 记一次70后架构师的技术分享会

    上周六,公司请了一位架构师给我们研发的小伙伴做技术分享会,他分别从需求、系统设计、接口设计、代码开发、测试五个方面做了分享,听完他的分享,收获挺多的,下面将自己...

    小诸葛
  • 系统游戏运行库DirectX修复工具 v3.8 增强版

    (DirectX Repair)是一款系统级工具软件,简便易用。本程序无需安装,可直接运行。 本程序的主要功能是检测当前系统的DirectX状态,如果发现异常则...

    空木白博客
  • Go语言学习——三分钟看透iota

    最近做需求时,有一个需要枚举的场景,大概有10+个枚举类型,不愿意像定义一个开关那样敷衍的写成

    JackieZheng
  • 猿进化系列10——一文学会动态模板的套路

    看完上一个章节,相信你已经掌握了servlet相关技术的基础知识和用法,你也学习过java的一些基础知识了,今天我们就一起来掌握动态web页面的制作姿势.

    山旮旯的胖子
  • 设置python作为redis的客户端

    章鱼喵
  • Redis的配置、启动、操作及关闭

    redis安装之后,src和/usr/local/bin目录下多了几个以redis开头的可执行文件,我们统称为redis shell,这些可执行文件可以做很多事...

    行 者
  • Selenium WebDriver找不到元素的三种情况

    原因:页面被刷新了。 在当前页面找不到这个元素了,但是你自己手动复制到页面开发者工具上查看明明有啊,为啥在代码里面就找不到了呢?这时,你还可能会问“可是明明元...

    软测小生
  • 如何在腾讯云上安装 MapD 的 GPU 可视化数据库

    MapD Technologies将MapD Core数据库进行开源啦。MapD是使用图形处理单元(GPU)以毫秒为单位分析数十亿行数据的先驱,比传统的基于CP...

    YingJoy_

扫码关注云+社区

领取腾讯云代金券