STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

1.在web浏览器中使用浏览器自带的websocket 不同的浏览器会提供不同的websocket协议

js中会使用ws://协议的地址与服务端进行交互。（图1）

图1

创建这个用于与后端websocket服务交互的对象需要使用 stomp.client（图2）

图2

client方法有两个参数 第一个就是链接后端websocket代理的地址，第二个可以更改websocket协议的子协议subprotocols。

建立之后要调用connect()方法进行链接验证。需要用户名、密码。

链接成功之后会发送一个成功的frame

链接之后可以 订阅/发送 消息给指定地址 做相应的操作

断开链接调用disconnect方法

附代码示例：

import output from "@/output";import Stomp from "stompjs";import { mapState } from "vuex";import { mapGetters } from "vuex";import { topicOnlineNum, voiceUrl } from "@/libs/publish";class dbSocket {  //ES6类的静态方法 static  static getInstance() {    if (!dbSocket.instance) {      dbSocket.instance = new dbSocket();      return dbSocket.instance;    }    return dbSocket.instance;  }  // 实质就是构造方法  // 通过new生成实例会自动调用，如果类型没有定义constructor则会默认添加  constructor() {    return this.createSocket();  }  //创建实例  createSocket() {    let _self = this;    return {      name: "dbSocket",      computed: {        ...mapGetters("admin/user", ["userInfo"]),      },      data() {        return {          client: Stomp.client(output.MQTT_SERVICE),        };      },      destroyed() {        console.log("断开连接");        this.client.disconnect();        this.client = null;        console.log("断开连接", this.client);      },      methods: {        connect() {          const headers = {            login: output.MQTT_USERNAME,            passcode: output.MQTT_PASSWORD,            host: "/linyi",          };          this.client.connect(headers, this.onConnected, this.onConFailed);        },        onConFailed(frame) {          console.log("onConFailed " + frame);        },        onConnected(frame) {          const voice = voiceUrl;          this.client.subscribe(voice, this.responseCallback1, this.onFailed2);        },        // 语音        responseCallback1(frame) {          console.log("语音回调===================》: " + frame);          let obj = JSON.parse(frame.body);          if (obj.meta.contentType == "cut") {            if (obj.data && obj.data[0].type == 1) {              let page = obj.data[0].page;              switch (page) {                case 1:                  this.$router.go(1);                  break;                case 0:                  this.$router.go(-1);                  break;              }            } else if (obj.data[0].type == 0) {              this.$router.push(obj.data[0].path);            }          } else if (obj.meta.contentType == "alert") {            this.getWarning();            this.renderFunc(obj.data);          }        },        onFailed2(frame) {          console.log("语音错误==================》: " + frame);        },        renderFunc(obj) {          let date = new Date();          this.$Notice.warning({            title: "报警",            duration: 10,            name: date,            render: (h) => {              return h("div", { class: "content-box" }, [                // obj.map((item) => h("li", null, item)),                h("li", { class: "li-style" }, obj[0]),                h(                  "div",                  {                    class: "img-box",                  },                  [                    h("img", {                      class: "img-style",                      attrs: {                        src: obj[1],                      },                      on: {                        click: this.showImgFn.bind(this, obj[1]),                      },                    }),                  ]                ),                h(                  "div",                  {                    class: "message-abtn",                    on: {                      click: this.goWarningCenter.bind(this, obj[0], date),                    },                  },                  "处理"                ),              ]);            },          });          // this.$Modal.warning({          //   title: "报警",          //   name: date,          //   render: (h) => {          //     return h("div", { class: "content-box" }, [          //       h('li', { class: 'li-style' }, obj[0]),          //       h('div', {          //         class: 'img-box'          //       }, [          //         h('img', {          //           class: 'img-style',          //           attrs: {          //             src: obj[1]          //           },          //           on:{          //             click:this.showImgFn.bind(this,obj[1])          //           }          //         }          //         ),          //       ]),          //     ]);          //   },          // });        },        goWarningCenter(name, date) {          console.log(this.$route.path, name, "close");          if (this.$route.path != "/warning/center") {            this.$router.push("/warning/center");          }          this.$Notice.close(date);        },      },    };  }}export default dbSocket;