vue如何使用websocket，以及把websocket挂载到vue成为全局变量

本项目使用websocket来实现用户点赞评论@后推送给对方。为了使用户不管在哪个页面都可以收到消息，所以需要把websocket挂载到vue上。

新建message.js

export default {
    ws: {},
    setWs: function(newWs) {
        this.ws = newWs
    }

}

mian.js里添加

import messageSocket from './api/messageSocket'
Vue.prototype.$messageSocket = messageSocket

在公共页面链接websocket，比如hearder.vue

        getMessageSocket() {

            let that = this;
            if ("WebSocket" in window) {

                console.log("您的浏览器支持 WebSocket!");

                that.ws = new WebSocket(messageSocketUrl+this.lander.uid);
                that.$messageSocket.setWs(that.ws);

                that.$messageSocket.ws.onopen = function() {
                    console.log("Socket 已打开");
                };

                that.$messageSocket.ws.onmessage = function(msg) {
                    console.log(msg.data)
                    let m=JSON.parse(msg.data);
                    that.$notify({
                        title: '你收到一条消息',
                        message: m.msg,
                        duration: 2000
                    });
                    //消息通知上面小红点出现
                    PubSub.publish('changeMyNotReadMessageNum', "1");
                };

                that.ws.onclose = function() {
                    // 关闭 websocket
                    console.log("连接已关闭...");
                    setTimeout(() => {
                        that.getMessageSocket();
                    }, 2000);
                };
            } else {
                this.$message.error("您的浏览器不支持 WebSocket!")
                // 浏览器不支持 WebSocket
                console.log("您的浏览器不支持 WebSocket!");
            }
        },

在mounted里调用

this. getMessageSocket();

然后在其他地方可以发送消息

let mess={name:this.lander.uid+"",receiver:t.authorUid+"",msg:this.lander.uname+" "+(res.data.status == 11?'取消了':'')+"点赞你的评论"}
this.sendMessage(JSON.stringify(mess))

sendMessage(msg){
    let that = this;
    console.log(that.$messageSocket.ws);
    if (that.$messageSocket.ws && that.$messageSocket.ws.readyState == 1) {
        console.log("发送信息", msg);
        that.$messageSocket.ws.send(msg);
    }else{
        that.ws = new WebSocket(messageSocketUrl+this.lander.uid);
        that.$messageSocket.setWs(that.ws);
        setTimeout(()=>{
            console.log("setTimeout发送信息", msg);
            that.$messageSocket.ws.send(msg);
        },2000)
    }
},

java后台

package xxx;


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.HashMap;
import java.util.List;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;


/**
 * @ServerEndpoint 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
 */
@ServerEndpoint(value = "/websocket/message/{muid}")
@Component
public class MessageWebSocket {


    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static CopyOnWriteArraySet<Map<String, MessageWebSocket>> webSocketSet = new CopyOnWriteArraySet<Map<String, MessageWebSocket>>();

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


    /**
     * 连接建立成功调用的方法
     * @param session  可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
     * @throws EncodeException
     * @throws IOException
     */
    @OnOpen
    public void onOpen(@PathParam(value = "muid") String param, Session session) throws EncodeException, IOException{
        this.session = session;
        Map<String, MessageWebSocket> map = new HashMap<String, MessageWebSocket>();
        String name = param ;
        Map<String, List<String>> listMap = session.getRequestParameterMap();

        map.put(name,this);


        addSocket(map, name);
    }

    // 添加map 到 webSocketSet，
    public void addSocket(Map<String, MessageWebSocket> map, String name) {
        // 删除重复的连接
        for(Map<String, MessageWebSocket> item: webSocketSet){
            for(String key : item.keySet()){
                if (key.toString().equals(name)) {
                    webSocketSet.remove(item);


                }
            }
        }
        webSocketSet.add(map); //加入set中


    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose(){
        for (Map<String, MessageWebSocket> item : webSocketSet) {
            for(String key : item.keySet()){
                if(item.get(key) == this){
                    // 删除关闭的连接
                    webSocketSet.remove(item);


                }
            }
        }
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     * @param session 可选的参数
     * @throws EncodeException
     */
    @OnMessage
    public void onMessage(String message, Session session) throws EncodeException {
        System.out.println("来自客户端的消息:" + message);
        Map<String,Object> map = (Map<String, Object>) JSONObject.parse(message);
        // 接收人
        String receiver = (String) map.get("receiver");


        for(Map<String, MessageWebSocket> item: webSocketSet){
            for(String key : item.keySet()){

                if (key.toString().equals(receiver.toString())) {
                    MessageWebSocket webSocket = item.get(key);
                    try {
                        System.out.println("给"+key+"发消息");
                        webSocket.sendMessage(message);
                    } catch (IOException e) {
                        e.printStackTrace();
                        continue;
                    }
                }
            }

        }
    }

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

    /**
     * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException{
        synchronized (this.session) {
            this.session.getBasicRemote().sendText(message);
        }
    }


}