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;