Uso de tomada vue

1, uma breve introdução

Há biblioteca baseada em comunicação WebSocket socket.io , SockJS , desta vez com SockJS.

2, fornecida

Aqui usamos sockjs-Client , stomjs estes dois módulos para alcançar as necessidades de comunicação WebSocket com o fundo, use o módulo correspondente.

Cliente-sockjs
sockjs-Client é separada do módulo de comunicação SockJS para os clientes usarem. Assim, basta olhar para SockJS. SockJS é uma biblioteca JavaScript do navegador que fornece um objeto semelhante a uma rede, SockJS fornecer uma coerente, cross-browser JavaScriptAPI, ele cria uma baixa latência, full-duplex, canal de comunicação de domínio cruzado entre o navegador eo servidor web. você pode perguntar, por que não usar WebSocket nativa em vez disso, use SockJS ele? obrigado uma das principais características SockJS, alguns navegadores não têm suporte para WebSocket, então a opção de recurso é necessário, e com base no framework Spring fornece contrato de opção fallback transparente SockJS. SockJS fornece compatibilidade do navegador, a precedência WebSocket nativa, se um navegador não suporta WebSocket, SockJS rebaixado automaticamente para uma pesquisa.

stomjs
o STOMP (o Protocolo de Mensagens simples, orientada-texto) mensagem de protocolo, um simples orientada para o texto;
. um WebSocket é uma arquitetura de mensagens, não força qualquer protocolo de mensagem em particular, o que significa que depende da camada de aplicação para decifrar a mensagem
diferente de HTTP, está em um WebSocket uma camada muito fina sobre TCP, vai byte fluxo em texto da mensagem / binário, por conseguinte, para aplicações práticas, o formato de comunicação nível WebSocket baixo, e, por conseguinte, pode ser utilizado no topo do protocolo WebSocket STOMP, é procurar aumentar a quantidade de comunicação entre a semântica de mensagens e servidor.

STOMP e WebSocket relação:

1. HTTP resolve protocolo do navegador web para iniciar uma solicitação e os detalhes das responde servidor Web para o pedido, assumindo o protocolo HTTP não existe, só pode usar sockets TCP para aplicações Write Web, você pode pensar que isso é uma coisa louca;
2. uso direto WebSocket (SockJS) é muito semelhante ao uso de sockets TCP para aplicações web writing, porque não existe um protocolo de alto nível, é necessário enviar uma semântica de mensagens entre aplicativos que definem, também precisam garantir que ambas as extremidades da conexão pode seguir estas semântica;
3. No pedido adição em sockets TCP com HTTP - a mesma camada de modelo de resposta, STOMP fornece um formato de quadro com base na WebSocket camada linha, utilizado para definir a semântica da mensagem.

3, Código

Instale sockjs-cliente e 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);
    }
}

artigo de referência https://juejin.im/post/5b7fd02d6fb9a01a196f6276