uniapp plus-websocket 和stompjs连

1下载 plus-websocket 和 stompjs

 npm install stompjs

 npm install  plus-websocket

看下载有没有成功 ，是在uniapp下 pages /package.json文件下。

stompjs

plus-websocket

image.png

2 封装 plus-websocket 文件。

下载地址 https://ext.dcloud.net.cn/plugin?id=647

文件名 websocket.js

    import socket from 'plus-websocket'
class WebSocketPolyfill {
  constructor(url) {

    // 创建连接
    socket.connectSocket({
      url: 'ws://10.0.0.42/ws/11235112321313123' , //这是域名
      success:function(res){
          console.log('res-创建连接-1-',res)
      }
    });

    // 连接开启
    socket.onSocketOpen((res) => {
      this.onopen(res);
    });

    // 连接关闭
    socket.onSocketClose((res) => {
      this.onclose(res);
    });

    // 连接异常
    socket.onSocketError((res) => {
      this.onerror(res);
    });

    // 接收消息
    socket.onSocketMessage((res) => {
      this.onmessage(res);
    });
  }

  /**
   * 连接开启
   */
  onopen(res) {}

  /**
   * 连接关闭
   */
  onclose(res) {}

  /**
   * 连接异常
   */
  onerror(res) {}

  /**
   * 接收消息
   */
  onmessage(res) {}

  /**
   * 发送消息
   */
  send(data) {
    socket.sendSocketMessage({
      data: data,
    });
  }

  /**
   * 关闭连接
   */
  close() {
    socket.closeSocket();
  }
}

export default WebSocketPolyfill;

使用教程

1 引入js

<script>
 import WebSocket from '@/utils/websocket.js'
 import Stomp from "stompjs";

 export default {
 data() {
return {
}
}，
     onLoad() {

           const websocket=  new WebSocket();//
         //   console.log('websocket---',websocket)
          let stompClient=Stomp.over(websocket)
          console.log('stompClient---',stompClient)
         
             stompClient.connect({}, (success) => {
                 this.$u.func.showToast('连接成功1')
                     
                     console.log("stompClient -websocket 连接成功1", success);
                 stompClient.subscribe('/user/notify/web', (res)=>{
                     console.log('订阅-2--',res);
                        this.$u.func.showToast('接收消息2')
                 });
                 }, (error) => {
                   console.log("websocket 连接失败3",error);
                    this.$u.func.showToast('连接失败3',error)
 
                 });

}

}


<script/>

1是 plsu-websocket 连接成功

2是stomp 获取服务端消息成功

image.png