在vue中使用SockJS实现webSocket通信的过程

在Vue中使用SockJS实现WebSocket通信的过程包括以下几步：

1. 安装SockJS依赖

npm install sockjs-client --save

1. 创建WebSocket对象
   在Vue组件的created钩子中，创建WebSocket对象并监听连接的状态变化。

import SockJS from 'sockjs-client'

export default {
  created() {
    const socket = new SockJS('http://localhost:8080/ws')
    socket.onopen = () => {
      console.log('WebSocket 连接成功')
    }
    socket.onclose = () => {
      console.log('WebSocket 连接关闭')
    }
  }
}

1. 发送和接收消息
   通过WebSocket对象的send方法发送消息，通过监听onmessage事件接收消息。

import SockJS from 'sockjs-client'

export default {
  created() {
    const socket = new SockJS('http://localhost:8080/ws')
    socket.onopen = () => {
      console.log('WebSocket 连接成功')
      socket.send('连接成功')
    }
    socket.onmessage = (message) => {
      console.log('收到消息：', message.data)
    }
    socket.onclose = () => {
      console.log('WebSocket 连接关闭')
    }
  }
}

1. 服务端实现
   除了客户端的实现，我们还需要在服务端实现Websocket的逻辑。以下是一个使用Spring Boot + Spring WebSocket实现Websocket服务端的示例程序：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler(), "/ws").setAllowedOrigins("*").withSockJS();
    }

    @Bean
    public WebSocketHandler chatWebSocketHandler() {
        return new ChatWebSocketHandler();
    }
}

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    private List<WebSocketSession> sessions = new ArrayList<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession currentSession : sessions) {
            if (currentSession.isOpen()) {
                currentSession.sendMessage(new TextMessage(message.getPayload()));
            }
        }
    }
}

以上就是使用SockJS实现Websocket通信的完整攻略。其中，客户端实现需要创建WebSocket实例，监听open、message和close事件，并实现send方法发送消息。服务端实现则需要配置WebSocket的注册和处理器，并实现具体的消息处理逻辑。