El uso de toma de vue

1, una introducción breve

Hay basada en la biblioteca de comunicación WebSocket socket.io , SockJS , esta vez con SockJS.

2, siempre

Aquí se utiliza sockjs-cliente , stomjs estos dos módulos para alcanzar las necesidades de comunicación WebSocket con el fondo, utilice el módulo correspondiente.

-Clientes sockjs
sockjs-cliente está separada de módulo de comunicación SockJS para los clientes de usar. Así que sólo nos fijamos en SockJS. SockJS es una biblioteca JavaScript del navegador que proporciona un objeto similar a una red, SockJS proporcionan un enfoque coherente, multi-navegador JavaScriptAPI, crea una baja latencia, full-duplex, canal de comunicación entre dominios entre el navegador y el servidor web. usted puede preguntar, ¿por qué no utilizar WebSocket nativa en cambio, el uso SockJS que? gracias una característica importante de SockJS, algunos navegadores no tienen soporte para WebSocket, por lo que la opción de reserva es necesario, y con base en el marco resorte proporciona acuerdo de opción de reserva transparente SockJS. SockJS proporciona compatibilidad del navegador, la precedencia WebSocket nativa, si un navegador no soporta WebSocket, SockJS rebajó de forma automática a una encuesta.

stomjs
la STOMP (el texto orientado al protocolo de mensajería simple) mensaje de protocolo, un simple texto orientado;
. un WebSocket es una arquitectura de mensajería, no obliga a ningún protocolo de mensaje en particular, lo que significa que depende de la capa de aplicación para descifrar el mensaje
a diferencia de HTTP, se encuentra en un WebSocket una capa muy delgada sobre TCP, se byte corriente en el texto del mensaje / binario, por lo tanto, para aplicaciones prácticas, el nivel de WebSocket bajo el formato de comunicación, y por lo tanto, se puede utilizar en la parte superior del protocolo de WebSocket STOMP, es navegar aumentar la cantidad de comunicación entre la semántica de mensajes y servidor.

STOMP y WebSocket relación:

1. HTTP resuelve el protocolo del navegador para iniciar una solicitud y los detalles de los servidores web responde a la solicitud, suponiendo que el protocolo HTTP no existe, sólo se puede utilizar sockets TCP para aplicaciones de escritura web, usted podría pensar que esto es una locura;
2. el uso de WebSocket directa (SockJS) es muy similar al uso de sockets TCP a aplicaciones de escritura web, ya que no existe un protocolo de alto nivel, es necesario enviar un mensaje semántica entre la aplicación definimos, también es necesario para asegurar que ambos extremos de la conexión puede seguir esta semántica;
3. En petición de adición en sockets TCP con HTTP - la misma capa modelo de respuesta, STOMP proporciona un formato de trama en base a la WebSocket capa de línea, que se utiliza para definir la semántica del mensaje.

3, Código

Instalar sockjs-cliente y stompjs

npm install sockjs-client
npm install stompjs

import SockJS from  'sockjs-client';
import  Stomp from 'stompjs';
export default {
    data(){
        return {
            stompClient:'',
            timer:'',
        }
    },
    methods:{
        initWebSocket() {
            this.connection();
            let that= this;
            // 断开重连机制,尝试发送消息,捕获异常发生时重连
            this.timer = setInterval(() => {
                try {
                    that.stompClient.send("test");
                } catch (err) {
                    console.log("断线了: " + err);
                    that.connection();
                }
            }, 5000);
        },  
        connection() {
            // 建立连接对象
            let socket = new SockJS('http://10.10.91.4:8081/ws');
            // 获取STOMP子协议的客户端对象
            this.stompClient = Stomp.over(socket);
            // 定义客户端的认证信息,按需求配置
            let headers = {
                Authorization:''
            }
            // 向服务器发起websocket连接
            this.stompClient.connect(headers,() => {
                this.stompClient.subscribe('/topic/public', (msg) => { // 订阅服务端提供的某个topic
                    console.log('广播成功')
                    console.log(msg);  // msg.body存放的是服务端发送给我们的信息
                },headers);
                this.stompClient.send("/app/chat.addUser",
                    headers,
                    JSON.stringify({sender: '',chatType: 'JOIN'}),
                )   //用户加入接口
            }, (err) => {
                // 连接发生错误时的处理函数
                console.log('失败')
                console.log(err);
            });
        },    //连接 后台
        disconnect() {
            if (this.stompClient) {
                this.stompClient.disconnect();
            }
        },  // 断开连接
    },
    mounted(){
        this.initWebSocket();
    },
    beforeDestroy: function () {
        // 页面离开时断开连接,清除定时器
        this.disconnect();
        clearInterval(this.timer);
    }
}

Artículo de referencia https://juejin.im/post/5b7fd02d6fb9a01a196f6276