maven引入

    org.springframework
    spring-websocket
    5.0.8.RELEASE
    compile

千万别使用下图依赖,别问我为什么,我也不知道,下图依赖可能会出现会注入报serverEndpointExporter错误,如果没有就当我没有说

 

1. 配置类

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

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

1. 会话服务器

import com.alibaba.fastjson.JSON;
import org.springblade.modules.websocket.model.Message;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;



@Component
@ServerEndpoint("/chat")
public class WebSocketChatServer {

    
    private static Map onlineSessions = new ConcurrentHashMap<>();

    
    @onOpen
    public void onOpen(Session session) {
        onlineSessions.put(session.getId(), session);
        sendMessageToAll(Message.jsonStr(Message.ENTER, "", "", onlineSessions.size()));
    }
    

    @onMessage
    public void onMessage(Session session, String jsonStr) {
        Message message = JSON.parseObject(jsonStr, Message.class);
        sendMessageToAll(Message.jsonStr(Message.SPEAK, message.getUsername(), message.getMsg(), onlineSessions.size()));
    }



    

    @onClose
    public void onClose(Session session) {
        onlineSessions.remove(session.getId());
        sendMessageToAll(Message.jsonStr(Message.QUIT, "", "", onlineSessions.size()));
    }



    

    @onError
    public void onError(Session session, Throwable error) {
        error.printStackTrace();
    }



    
    private static void sendMessageToAll(String msg) {
        onlineSessions.forEach((id, session) -> {
            try {
                session.getBasicRemote().sendText(msg);
            } catch (IOException e) {
                e.printStackTrace();
            }
        });
    }
}

1. 聊天消息类

import com.alibaba.fastjson.JSON;




public class Message {
   
    public static final String ENTER = "ENTER";
    public static final String SPEAK = "SPEAK";
    public static final String QUIT = "QUIT";
    private String type;//消息类型
    private String username; //发送人
    private String msg; //发送消息
    private int onlineCount; //在线用户数
    public static String jsonStr(String type, String username, String msg, int onlineTotal) {
        return JSON.toJSONString(new Message(type, username, msg, onlineTotal));
    }



    public Message(String type, String username, String msg, int onlineCount) {
        this.type = type;
        this.username = username;
        this.msg = msg;
        this.onlineCount = onlineCount;
    }



    public static String getENTER() {
        return ENTER;
    }



    public static String getSPEAK() {
        return SPEAK;
    }



    public static String getQUIT() {
        return QUIT;
    }



    public String getType() {
        return type;
    }



    public void setType(String type) {
        this.type = type;
    }



    public String getUsername() {
        return username;
    }



    public void setUsername(String username) {
        this.username = username;
    }



    public String getMsg() {
        return msg;
    }



    public void setMsg(String msg) {
        this.msg = msg;
    }



    public int getonlineCount() {
        return onlineCount;
    }



    public void setonlineCount(int onlineCount) {
        this.onlineCount = onlineCount;
    }
}

前端代码

mounted() {
 this.connection();
},

methods: {connection() {
 if (typeof (WebSocket) == "undefined") {
  console.log("您的浏览器不支持WebSocket");
 } else {
  console.log("您的浏览器支持WebSocket");
  //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
  //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
  this.socket = new WebSocket("ws://localhost:8715/chat".replace("http", "ws"));
  //打开事件
  this.socket.onopen = function () {
   console.log("Socket 已打开");
   //socket.send("这是来自客户端的消息" + location.href + new Date());
  };
  //获得消息事件
  this.socket.onmessage = function (msg) {
   console.log(msg.data);
   //发现消息进入    开始处理前端触发逻辑
  };
  //关闭事件
  this.socket.onclose = function () {
   console.log("Socket已关闭");
  };
  //发生了错误事件
  this.socket.onerror = function () {
   alert("Socket发生了错误");
   //此时可以尝试刷新页面
  }
 }
}
},