简单的搭建Websocket（java+vue）

简单记录一下搭建webSocket的过程

搭建webSocket非常简单，只需要以下两步

1. 后台创建websocket配置类
2. 后台创建websocket类
3. 前端页面连接

后台WebSocket配置类如下

配置类，照搬即可

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class MyWebSocketConfig {

    @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/{key}")
public class MyWebSocket {
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;

    private static CopyOnWriteArraySet<MyWebSocket> webSockets =new CopyOnWriteArraySet<>();
    //用来存放每个客户端对应的WebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
    private static Map<String,Session> sessionPool = new HashMap<String,Session>();

    @OnOpen
    public void onOpen(Session session, @PathParam(value="key")String key) {
        this.session = session;
        webSockets.add(this);
        sessionPool.put(key, session);
        System.out.println("【websocket消息】有新的连接，总数为:"+webSockets.size());
        sendAllMessage("欢迎您，客户端");
    }

    @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(MyWebSocket webSocket : webSockets) {
            System.out.println("【websocket消息】广播消息:"+message);
            try {
                webSocket.session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }


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

}

最后，前端页面

前端，方法可以自由定义什么时候创建链接，我是直接页面初始化就创建链接

<template>
<a-card>
  <div>
    <h1>测试webSocket</h1>
    <button @click="send">点击请求后台数据</button>
    <button @click="onClose">关闭连接</button>
  </div>
  </a-card>
</template>
<script>
export default {
  created() {
    // 页面创建生命周期函数
    this.initWebSocket();
  },
  methods: {
    onClose(){
      this.websock.close();
    },
    initWebSocket() {
      if ("WebSocket" in window) {
        // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
        //d5533相当于我这台客户端的标识，key,用来单客户端通话
        this.websock = new WebSocket(
          "ws://localhost:8010/websocket/d5533"
        );
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      } else {
        alert("not error  不支持websocket");
      }
    },
    //连接回调
    websocketonopen() {
      console.log("WebSocket连接成功");
    },
    //发生错误回调
    websocketonerror(e) {
      console.log("WebSocket连接发生错误");
    },
    //接收到消息的回调函数
    websocketonmessage(e) {
      console.log(e.data); // console.log(e);
    },
    // 连接关闭时的回调函数
    websocketclose(e) {
      console.log("connection closed (" + e + ")");
    },
    send() {
      this.websock.send('后台你好，我是前端');
    }
  }
};
</script>
<style lang="less" scoped>
</style>

到这里，就完成了一个简单的WebSocket就搭建完成了，可以进行前后端互相通话，大家快动手试试吧。

关注公众号，不定期干货噢