vue使用sockjs-client+stompjs进行websocket连接的方法

发表于 | 分类于

vue使用sockjs-client+stompjs进行websocket连接的方法

安装vue

vue 安装方式请查看官网 https://cn.vuejs.org/v2/guide/installation.html

什么是sockjs和stompjs

Sock.JS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket，如果在不支持websocket的浏览器中，会自动降为轮询的方式

和spring websockt支持良好，也可以配合消息队列中间件使用(rabbitmq)

Stomp.js（处理传输协议）
stomp是一个用于client之间进行异步消息传输的简单文本协议.

在vue项目中使用

使用npm安装

1
2
npm install sockjs-client --save
npm install stompjs --save

在项目package.json中查看安装信息

然后在需要建立websocket连接的组件中引入：

1
2
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

在created生命周期中建立连接：

1
2
3
4
5
6
7
8
9
10
created:function(){
   let socket = new SockJS('http://192.168.20.246:8080/endpoint-websocket');
   let stompClient = Stomp.over(socket);
   stompClient.connect({}, function (frame) {
     stompClient.subscribe('/topic/game_chat', function (message) {
       console.warn(message.body);
       console.warn(JSON.parse(message.body));
     });
   });
 }

完了就是这么简单！！！

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<template>
  <div>
      Hello world
  </div>
</template>

<script>
  import SockJS from 'sockjs-client';
  import Stomp from 'stompjs';
export default {
  name: 'websocket',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created:function(){
    let socket = new SockJS('http://192.168.20.246:8080/endpoint-websocket');
    let stompClient = Stomp.over(socket);
    stompClient.connect({}, function (frame) {
      stompClient.subscribe('/topic/game_chat', function (message) {
        console.warn(message.body);
        console.warn(JSON.parse(message.body));
      });
    });
  }
}
</script>

运行vue查看控制台结果如下， 当然你还需要一个后端程序才能看到效果，我这边使用的是spring boot2.x + websocket