vue-springboot：webSocket的使用，同步购物车实例

1.什么是WebSocket消息推送

        在单个TCP连接上进行全双工通讯的协议

        比如说 A设备添加数据，B设备同步了A添加的数据。使用场景：扫码点餐，同步购物车。

2.vue代码：

        初始化调用方法initWebSocket()：

initWebSocket() {
      let vm = this;
      if ("WebSocket" in window) {
        let websock = new WebSocket(
          //配置的是后台路径，process.env.VUE_APP_BASE_API1 可以是ip地址或者localhost
          "ws://" + process.env.VUE_APP_BASE_API1 + "/websocket/cart"
        );
        websock.onerror = function (e) {
          console.log("WebSocket连接失败");
        };

        websock.onmessage = function (e) {
          //此处返回值是后台返会的数据，如下文中的socketReq
          console.log("WebSocket连接成功",e);
          
        };

        websock.onclose = function (e) {
          console.log("已关闭连接", e);
        };
      } else {
        Toast(vm.$t("您的浏览器不支持同步，推荐使用谷歌浏览器"));
      }
    },

3.java代码

        ·配置xml，引入包

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

        ·建立使用类

                @ServerEndpoint("/websocket/cart")的路径要和前端访问的路径一致

package com.ruoyi.web.controller.dcWebSocket;

import cn.hutool.log.Log;
import cn.hutool.log.LogFactory;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;


@ServerEndpoint("/websocket/cart")
@Component
public class WebSocketServerCart {
    static Log log = LogFactory.get(WebSocketServerCart.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();


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


    //接收isSX  用了标识哪个模块的通信,是否需要刷新
    boolean isSX = false;
    
    @OnOpen
    public void onOpen(Session session,@PathParam("isSX") boolean isSX) {
        this.session = session;
        webSocketSet.add(this);     //加入set中
        log.info("新窗口监听: 是否需要刷新：" + isSX);
        this.isSX=isSX;
        try {
            sendMessage("vue调用 连接成功");
        } catch (IOException e) {
            log.error("websocket IO异常");
            e.printStackTrace();
        }
    }


    
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);  //从set中删除
        subOnlineCount();           //在线数减1
        log.info("有一连接关闭！");
    }


    
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("收到客户端消息后:"+message);
        //群发消息
        for (WebSocketServerCart item : webSocketSet) {
            try {
                item.sendMessage(message);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }


    
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("发生错误");
        error.printStackTrace();
    }
    
    public void sendMessage(Object obj) throws IOException {
        this.session.getBasicRemote().sendText(JSONObject.toJSONString(obj));
    }

    
    public static void sendInfo(Object obj,@PathParam("isSX") boolean isSX) throws IOException {
        log.info("群发自定义消息:"+obj);
        for (WebSocketServerCart item : webSocketSet) {
            try {
                //这里可以设定只推送给这个sid的，为null则全部推送
                if(isSX) {
                    item.sendMessage(obj);
                }
            } catch (IOException e) {
                continue;
            }
        }
    }


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


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


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

}

         ·使用场景：

在代码中，适当的地方，加入WebSocketServerCart.sendInfo(socketReq,true);。其中，socketReq是要返回到前台的数据，true表示确认将数据返回到前台。（如果不想通过true/false控制是否返会到前台，可以将sendinfo方法中的限制去掉即可。）

如此，就可以利用webstock实现简单的同步效果。