WebSocket在vue 与 Spring boot中的使用

1.什么是WebSocket：

• WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
• WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API
  中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
• 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

2.Spring boot中使用WebSocket：

在java后台中，websocket是作为一种服务端配置，其配置如下

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

添加上面的配置之后就可以编辑自己的websocket实现类了，如下

import org.springframework.stereotype.Component;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.HashMap;
import java.util.Map;
import java.util.concurrent.CopyOnWriteArraySet;

@Component
@ServerEndpoint("/websocket/{userOnlineId}")
public class WebSocket {

    private Session session;

    private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
    private static Map<String,Session> sessionPool = new HashMap<String,Session>();

    @OnOpen
    public void onOpen(Session session, @PathParam(value="userOnlineId")String userOnlineId) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(userOnlineId, 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);
    }

    /**
     * 此为广播消息
     * @param 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();
            }
        }
    }

    /**
     * 此为单点消息 (发送文本)
     * @param userOnlineId
     * @param message
     */
    public void sendTextMessage(String userOnlineId, String message) {
        Session session = sessionPool.get(userOnlineId);
        if (session != null) {
            try {
                session.getBasicRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 此为单点消息 (发送对象)
     * @param userOnlineId
     * @param message
     */
    public void sendObjMessage(String userOnlineId, Object message) {
        Session session = sessionPool.get(userOnlineId);
        if (session != null) {
            try {
                session.getAsyncRemote().sendObject(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }
}

其中@ServerEndpoint类似于@RequestMapping的作用，用于指定路径。
在与前端建立链接之后，便可以使用该实现进行数据的传输。使用时直接使用@Autowired进行自动注入使用便可。

3.在Vue中使用WebSocket

此中给出的例子为强制用户下线

initWebSocket: function () {                
			// WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https                
	this.websock = new WebSocket("ws://localhost:9801/websocket/"+localStorage.userOnlineInfo_id);                
	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) {
     if(e.data == "1"){
        // alert("您已被强制下线")
        this.$message({
            message: "您已被强制下线，请重新登录",
            type: "error"
        });
        this.$router.push("/login");
        this.websock.close();
      }                                
},              
websocketclose: function (e) {                
	console.log("connection closed (" + e.code + ")");              
},                     

其中地址为 localhost:9801/websocket/"+localStorage.userOnlineInfo_id
userOnlineInfo_id 为唯一标识 用来区分与哪个服务端建立起连接。

mounted() {
    this.initWebSocket();
  },
destroyed() {
    this.websock.close();
  }

在所需要建立连接的页面（例如页面的头部处）建立起连接。该页面实例化便会建立起连接。关闭页面，连接便会断开。

至此一个简易的完整的websocket已经完成了，具体功能可以依此为基本进行扩展。