uniapp app.vue全局使用websocket

之前百度看了很多种 还有uniapp自带的方法
个人觉得uniapp的方法还是比较简单,上代码

app.vue文件

 data() {
    return {
      show: false, //投诉弹窗
      timeout: 5000, //
      timeoutObj: null,
      tokenUser: "",
    };
  },

 created() {
 //我这里是登陆之后根据token判断连接websocket
    this.tokenUser = uni.getStorageSync("token");
    if (this.tokenUser !== "") {
      this.connectWebsocket();
    } 
  },



  methods: {
    //wx连接
    connectWebsocket() {
      uni.showLoading({
        title: "connect...",
      });
      if ("WebSocket" in window) {
        console.log("您的浏览器支持 WebSocket!");
        let socketUrl = uni.getStorageSync("socketUrl");
        //创建一个 WebSocket 连接
        uni.connectSocket({
          url: `${socketUrl}?token=${this.tokenUser}`,
          success: (res) => {
            console.log("连接成功 connectSocket=", res);
          },
          fail(err) {
            consol
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要在uniapp中封装WebSocket全局使用,可以按照以下步骤操作: 1. 创建一个WebSocket.js文件,用于封装WebSocket的相关逻辑。在该文件中,可以定义WebSocket的连接、发送和关闭等方法。 ``` export default { socketTask: null, // 连接websocket connect(url) { this.socketTask = uni.connectSocket({ url: url, success: () => { console.log('WebSocket连接成功') } }) this.socketTask.onOpen(() => { console.log('WebSocket连接打开') }) this.socketTask.onMessage((res) => { console.log('WebSocket收到消息', res) }) this.socketTask.onError((res) => { console.log('WebSocket连接错误', res) }) this.socketTask.onClose((res) => { console.log('WebSocket连接关闭', res) }) }, // 发送消息 send(msg) { this.socketTask.send({ data: msg, success: () => { console.log('WebSocket发送消息成功', msg) } }) }, // 关闭连接 close() { this.socketTask.close({ success: () => { console.log('WebSocket连接关闭成功') } }) } } ``` 2. 在main.js中引入WebSocket.js,并将其挂载到Vue原型上,以便在全局使用。 ``` import Vue from 'vue' import App from './App' import WebSocket from './WebSocket' Vue.prototype.$socket = WebSocket Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ ...App }) app.$mount() ``` 3. 在需要使用WebSocket的页面或组件中,可以通过this.$socket来调用WebSocket的连接、发送和关闭等方法。 ``` export default { created() { this.$socket.connect('ws://localhost:8080') this.$socket.send('Hello, WebSocket!') }, beforeDestroy() { this.$socket.close() } } ``` 这样,我们就可以在uniapp中封装WebSocket全局使用了。需要注意的是,WebSocket的连接地址应该根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值