UniApp 中怎么使用 WebSocket 连接服务？-icode9专业技术文章分享

本文主要是介绍UniApp 中怎么使用 WebSocket 连接服务？-icode9专业技术文章分享，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. 创建 WebSocket 连接

使用 uni.connectSocket 方法建立与服务器的 WebSocket 连接。

// 创建 WebSocket 连接
const socket = uni.connectSocket({
  url: 'wss://your.websocket.server', // 替换为你的 WebSocket 服务器地址
  protocol: ['protocol1', 'protocol2'], // 可选，定义使用的协议
});

// 监听打开连接
socket.onOpen(() => {
  console.log('WebSocket连接已打开');
});

// 监听错误
socket.onError((error) => {
  console.error('WebSocket连接打开失败', error);
});

Copy
JavaScript

2. 发送消息

连接建立后，可以使用 socket.send 方法发送消息。

// 发送消息
function sendMessage(message) {
  // 确保 WebSocket 已连接
  socket.send({
    data: message, // 发送的数据
    success: () => {
      console.log('消息发送成功');
    },
    fail: (error) => {
      console.error('消息发送失败', error);
    }
  });
}

// 示例：发送一条消息
sendMessage('Hello, WebSocket!');

Copy
JavaScript

3. 接收消息

可以使用 socket.onMessage 方法监听服务器发送来的消息。

// 监听消息
socket.onMessage((message) => {
  console.log('收到消息:', message.data);
  // 处理接收到的消息
});

Copy
JavaScript

4. 关闭连接

在适当的时候，可以使用 socket.close 方法关闭 WebSocket 连接。

// 关闭连接
function closeSocket() {
  socket.close({
    success: () => {
      console.log('WebSocket连接已关闭');
    },
    fail: (error) => {
      console.error('关闭WebSocket连接失败', error);
    }
  });
}

// 示例：关闭连接
closeSocket();

Copy
JavaScript

5. 综合示例

结合上述步骤，下面是一个完整的示例，展示如何在 UniApp 中实现 WebSocket 连接：

<template>
  <view>
    <button @click="connect">连接 WebSocket</button>
    <button @click="disconnect">关闭 WebSocket</button>
    <button @click="sendMessage('Hello, WebSocket!')">发送消息</button>
    <text>收到消息：{{ receivedMessage }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      receivedMessage: ''
    };
  },
  methods: {
    connect() {
      this.socket = uni.connectSocket({
        url: 'wss://your.websocket.server', // 替换为你的 WebSocket 服务器地址
      });

      this.socket.onOpen(() => {
        console.log('WebSocket连接已打开');
      });

      this.socket.onError((error) => {
        console.error('WebSocket连接打开失败', error);
      });

      this.socket.onMessage((message) => {
        console.log('收到消息:', message.data);
        this.receivedMessage = message.data; // 更新收到的消息
      });
    },
    sendMessage(message) {
      if (this.socket && this.socket.readyState === 1) { // 确保仍然连接
        this.socket.send({
          data: message,
          success: () => {
            console.log('消息发送成功');
          },
          fail: (error) => {
            console.error('消息发送失败', error);
          }
        });
      } else {
        console.log('WebSocket尚未连接');
      }
    },
    disconnect() {
      if (this.socket) {
        this.socket.close({
          success: () => {
            console.log('WebSocket连接已关闭');
          },
          fail: (error) => {
            console.error('关闭WebSocket连接失败', error);
          }
        });
      }
    }
  }
}
</script>

Copy
Vue

6. 启动 WebSocket 服务

在使用 WebSocket 之前，确保你的 WebSocket 服务器已启动并能够正常接收和回应消息。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于UniApp 中怎么使用 WebSocket 连接服务？-icode9专业技术文章分享的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！