盒子
盒子

SpringBoot使用WebSocket

2018.11.16 Grooter 后端  热度 ℃

做项目遇到了如下需求：

用户扫码上座，如果遇到已被占用的座位，需要调用后台接口让管理系统页面弹出对话框询问管理员是否释放该座位

这就涉及到了后台主动与前端页面交互

所以考虑使用WebSocket长连接协议来实现

  • 添加依赖

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

  • 创建配置类

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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();
        }
    }

  • 创建WebSocket连接类

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    import org.springframework.stereotype.Component;
    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
    import java.util.concurrent.CopyOnWriteArraySet;

    @ServerEndpoint("/websocket")
    @Component
    public class WebConnecter {
        private Session session;
        private WebConnecter webConnecter;
        @OnOpen
        public void onOpen(Session session){
          System.out.println("连接成功");
            this.session = session;
            websocket=this;
        }
        @OnClose
        public void onClose(){
            System.out.println("连接断开");
        }
        @OnMessage
        public void onMessage(String message, Session session) {
            System.out.println("来自客户端的消息:" + message);
        }
        @OnError
        public void onError(Session session, Throwable error){
            System.out.println("发生错误");
            error.printStackTrace();
        }
        public static void showDialog(String content){
            webConnecter.sendMessage(content);
        }
    }

  • 后端请求接口类

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    import io.github.grooters.seatOccupied.tool.CheckCoder;
    import org.springframework.web.bind.annotation.RestController;
    import java.util.List;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import io.github.grooters.seatOccupied.dao.*;
    import io.github.grooters.seatOccupied.model.Seat;
    import io.github.grooters.seatOccupied.model.User;

    @RestController
    public class AdminOperations {
    	@RequestMapping(value={"/showDialog"},method = RequestMethod.GET)
    	public String showDialog() {
    		WebConnecter.showDialog("content");
    		return "1";
    	}
    }

  • 前端页面html

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    <!DOCTYPE html>
    <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>WebSocketTest</title>
          <script type="text/javascript" src="js/WebSockeTer.js"></script>
      </head>
      <body onload="connect()"></body>
    </html>

  • 前端页面js

    • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    function connect() {
        console.log("connect");
        var webSocket=new WebSocket("ws://localhost:8080/websocket");
        webSocket.onopen=function (ev) {
            // webSocket.send("我是前端页面");
            alert("连接成功");
        };
        webSocket.onmessage=function (ev) {
            var data=ev.data;
            alert("接收的数据为："+data);
        };
        webSocket.onclose=function (ev) {
            alert("连接已关闭");
        };
    }

    最后只要请求接口前端页面便会弹出dialog：

    http://localhost:8080/showDialog

    支持一下
    扫一扫，支持Grooter
    • 微信扫一扫
    • 支付宝扫一扫