WebSocketの使用(VUEとSpringBootに基づく)

WebSocketは、HTML 5が提供し始めた単一のTCP接続上でフルデュプレクス通信を行うプロトコルである.WebSocketは、クライアントとサーバ間のデータ交換をより簡単にし、サービス側がクライアントにデータを積極的にプッシュできるようにします.WebSocket APIでは、ブラウザとサーバが握手を1回完了するだけで、両者の間に永続的な接続を直接作成し、双方向のデータ転送を行うことができます.
WebSocket APIでは、ブラウザとサーバが握手をするだけで、ブラウザとサーバの間に高速チャネルが形成されます.両者の間で直接データを互いに転送することができる.
現在、多くのサイトがプッシュテクノロジーを実現するために使用しているテクノロジーはAjaxポーリングです.ポーリングは、1秒ごとなどの特定の時間間隔で、ブラウザによってサーバに対してHTTP要求を発行し、サーバによって最新のデータをクライアントのブラウザに返す.このような従来のモードは、ブラウザがサーバに絶えず要求する必要があるという明らかな欠点をもたらしているが、HTTP要求には長いヘッダが含まれている可能性があり、その中で本当に有効なデータはほんの一部であり、多くの帯域幅などのリソースを浪費することは明らかである.
HTML 5で定義されたWebSocketプロトコルは、サーバリソースと帯域幅をより効率的に節約し、よりリアルタイムで通信することができます.
WebSocketの詳細については菜鳥チュートリアルWebSocketを参照してください.
最近使用される技術スタックはVUEおよびSpringBootであるため、この文書で使用される技術環境もVUEおよびSpringBootの下である.
まず、バックエンド(SpringBoot)でWebSocketを構成することをお勧めします.
maven依存(SpringBootプロジェクトが2.0以上のため、最適バージョンが自動的に選択されるため、ここにはバージョン番号が付いていません):

   org.springframework.boot
   spring-boot-starter-websocket

WebSocket構成クラス:

@Configuration
public class WebSocketConfig {
     /**
     *   ServerEndpointExporter，
     *   bean        @ServerEndpoint     Websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    
}

WebSocket操作クラス:

WebSocket                      

@Component
@ServerEndpoint("/websocket/{shopId}")
//          URL
public class WebSocket {
    
    private Session session;
    
    private static CopyOnWriteArraySet webSockets =new CopyOnWriteArraySet<>();
    private static Map sessionPool = new HashMap();
    
    @OnOpen
    public void onOpen(Session session, @PathParam(value="shopId")String shopId) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(shopId, session);
        System.out.println("【websocket  】     ，   :"+webSockets.size());
    }
    
    @OnClose
    public void onClose() {
        webSockets.remove(this);
        System.out.println("【websocket  】    ，   :"+webSockets.size());
    }
    
    @OnMessage
    public void onMessage(String message) {
        System.out.println("【websocket  】       :"+message);
    }
    
    //       
    public void sendAllMessage(String message) {
        for(WebSocket webSocket : webSockets) {
            System.out.println("【websocket  】    :"+message);
            try {
                webSocket.session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
    //       
    public void sendOneMessage(String shopId, String message) {
        Session session = sessionPool.get(shopId);
        if (session != null) {
            try {
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
    
}

Controllerでの使用

@RestController
@RequestMapping("api")
public class TestController {
    @Autowired
    private WebSocket webSocket;

    @RequestMapping("/sendAllWebSocket")
    public String test() {    
        webSocket.sendAllMessage("       ，     ~");
        return "websocket    ！";        
    }
    
    @RequestMapping("/sendOneWebSocket")
    public String sendOneWebSocket() {
        webSocket.sendOneMessage("DPS007", "        gai！");
        return "websocket    ";
    }
}

フロントエンド(VUE)でWebSocketを使用

    vue        ，        WebSocket   js         

    export default {
        data() {
            return {
                shopId：''
            }
        },
        created() { //           
              this.initWebSocket()
        },
        destroyed: function () { //           
              this.websocketclose();
        },
        methods: {
            collapse: function(){
                this.isCollapse = !this.isCollapse;
                if (this.isCollapse) {
                    this.iconClass = "cebianlanzhankai";
                } else{
                    this.iconClass = "cebianlanshouhui";
                }
            },
            initWebSocket: function () {
                // WebSocket              ，ws   http，wss   https
                this.websock = new WebSocket("ws://localhost:8046/websocket/DPS007");
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                   this.websock.onmessage = this.websocketonmessage;
                this.websock.onclose = this.websocketclose;
              },
              websocketonopen: function () {
                console.log("WebSocket    ");
              },
              websocketonerror: function (e) {
                console.log("WebSocket      ");
              },
              websocketonmessage: function (e) {
                var da = JSON.parse(e.data);
                console.log(da);
                this.message = da;
              },
              websocketclose: function (e) {
                console.log("connection closed (" + e.code + ")");
              }
        }
    }