Vue+Java 通过websocket实现服务器与客户端双向通信操作

一、介绍

WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在传统的HTTP请求中，双方之间的数据传输是单向的，即客户端向服务端发送请求，服务端对请求进行处理后把处理结果（响应）返回给客户端。WebSocket 协议在建立连接后，双方都可以独立的向对方发送数据，而不是像HTTP请求那样只能由客户端向服务端发送数据。这里，我们将演示如何在Vue和Java应用中使用 WebSocket 来实现服务端与客户端的双向通信。

二、Vue端使用WebSocket

在Vue应用中，我们可以使用standard WebSocket API。 在这个示例中，我们将演示如何在Vue组件中使用WebSocket来处理消息。

<template>
    <div>
        <h3>WebSocket Demo</h3>
        <button @click="connect()">Connect</button>
        <button @click="disconnect()">Disconnect</button>
        <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
        <div v-if="error" class="error">{{ error }}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            messages: [],
            socket: null,
            error: null
        }
    },
    methods: {
        connect() {
            if (this.socket && this.socket.readyState == 1) {
                return
            }
            const socket = new WebSocket('ws://localhost:8080/ws-server-endpoint')
            socket.onopen = (event) => {
                console.log('WebSocket opened:', event)
            }
            socket.onmessage = (event) => {
                console.log('WebSocket message received:', event)
                this.messages.push(event.data)
            }
            socket.onerror = () => {
                this.error = 'WebSocket error occurred.'
            }
            socket.onclose = () => {
                this.error = 'WebSocket closed.'
            }
            this.socket = socket
        },
        disconnect() {
            if (this.socket && this.socket.readyState == 1) {
                this.socket.close()
                this.socket = null
                console.log('WebSocket disconnected')
            }
        }
    }
}
</script>

在上面的代码示例中，我们在Vue组件中定义了一些方法用于连接和断开WebSocket连接。我们还定义了一个数组来存储消息，并使用 v-for 指令来渲染消息列表。在创建连接时，我们将 WebSocket 的地址设置为 ws://localhost:8080/ws-server-endpoint，这需要与Java代码中设置的地址相同。

当连接建立后，我们使用 onmessage 方法来接收来自服务器的消息并将其添加到消息列表中。 WebSocket 连接的状态变化通过 onopen，onerror 和 onclose 事件进行监控。在连接关闭后，我们将解除该组件中的Websocket 内存对象的引用。 在下面的Java代码段中，我们将处理来自客户端的连接请求并为连接创建一个WebSocketServer。

三、Java端实现WebSocketServer

我们将把WebSocket 处理放在Java应用中。在这个示例中，我们使用Java EE6规范给出的Api，即javax.websocket。

@ServerEndpoint(value = "/ws-server-endpoint")
public class WSServerEndpoint {

    private static final Set<Session> sessions = Collections.synchronizedSet(new HashSet<>());

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
        System.out.println("WebSocket opened: " + session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        for (Session s : sessions) {
            if (s.isOpen()) {
                s.getBasicRemote().sendText(message);
            }
        }
    }

    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
        System.out.println("WebSocket closed: " + session.getId());
    }

    @OnError
    public void onError(Throwable t) {
        System.out.println("WebSocket error occurred: " + t.getMessage());
    }
}

在上面的代码示例中，我们使用 @ServerEndpoint 注解标记来表明这是一个 WebSocket 服务器端点。在 WSServerEndpoint 类中，我们使用 @OnOpen 方法来处理连接，并将使用 synchronizedSet 来保证线程安全。在 @OnMessage 方法中，我们将处理客户端发送的消息并将其传递给所有连接。在 @OnClose 方法中，我们将从 sessions 集合中删除关闭的会话，并记录其 ID。最后，在 @OnError 注解中，我们将处理任何错误。这些函数是Java中调用WebSocket API时必需的。

实现WebSocket后，我们现在将展示如何将WebSocket发送给客户端。我们还将展示WebSocket处理客户端连接请求的代码。

@Named
public class IndexController {
    @Inject
    private WSServerEndpoint wsServerEndpoint;

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("Message received: " + message);
        wsServerEndpoint.broadcast(message);
    }
}

在上面的代码示例中，我们使用 @Inject 来注入 WSServerEndpoint 对象，并使用 @OnMessage 来处理来自客户端的消息。 在其中，我们将消息广播到所有连接会话中，这可以通过调用 WSServerEndpoint#broadcast() 方法实现。 这些方法提供了在连接客户端和服务器之间双向发送数据的功能。

四、示例

我们现在可以使用类似于这样的代码来跑我们的示例：

public class WebSocketExample {
    public static void main(String[] args) throws IOException, InterruptedException {
        WebSocketContainer container = ContainerProvider.getWebSocketContainer();
        Session session = container.connectToServer(new Endpoint() {
            @Override
            public void onOpen(Session session, EndpointConfig endpointConfig) {
                try {
                    session.getBasicRemote().sendText("Java WebSocket is now open.");
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }, new URI("ws://localhost:8080/ws-server-endpoint"));
        session.addMessageHandler(String.class, System.out::println);
        session.getBasicRemote().sendText("Java WebSocket connected.");
        Thread.sleep(5000);
        session.close();
    }
}

该示例将连接到一个WebSocket 服务器端点，并在建立连接后发送消息。我们还为 WebSocket 对象设置了一个消息处理程序，以便在接收到消息时将其输出到控制台。 最后，在5秒后，我们将关闭连接。

以上就是Vue和Java使用WebSocket来实现服务端与客户端之间的双向通信的攻略。