uniapp websocket封装

### 回答1：
UniApp 是一款使用 Vue.js 开发跨平台应用的框架，对于 WebSocket 的封装，UniApp 已经内置了 websocket 模块，可以使用它实现 WebSocket 通信。步骤如下：

1. 在需要使用 WebSocket 的页面导入 websocket 模块：`import websocket from '@dcloudio/web-socket-uni/dist/index.js'`

2. 创建 WebSocket 连接：`const socketTask = websocket.connectSocket({url: 'ws://xxx'})`

3. 监听 WebSocket 事件：`socketTask.onOpen(res => {})`、`socketTask.onMessage(res => {})`、`socketTask.onClose(res => {})` 等

4. 发送 WebSocket 数据：`socketTask.send({data: 'xxx'})`

5. 关闭 WebSocket 连接：`socketTask.close()`

有关详细的使用方法，请参考 UniApp 官方文档：https://uniapp.dcloud.io/api/socket。

### 回答2：
Uniapp是一款非常优秀的跨平台开发工具，它支持多种前端框架，并提供了很多API，其中就包括了WebSocket API。但是，Uniapp并没有对WebSocket API进行封装，需要我们自己根据需求进行封装。

首先，我们需要创建一个websocket.js文件，该文件用于封装WebSocket实例对象的创建、发送消息和接收消息等操作。我们可以通过调用Uniapp提供的wx.connectSocket()和wx.onSocketOpen()等API来创建和管理WebSocket实例。在封装时，我们可以定义一个对象，该对象包含WebSocket实例的属性和方法，以便于调用。以下是一个简单的WebSocket封装示例：

const WS = {
  ws: null,
  connected: false,
  create(url) {
    this.ws = uni.connectSocket({
      url: url
    })
  },
  close() {
    this.ws.close({
      success: () => {
        this.connected = false
      }
    })
  },
  send(data) {
    if (this.connected) {
      this.ws.send({
        data: JSON.stringify(data)
      })
    }
  },
  onOpen(callback) {
    this.ws.onOpen(() => {
      this.connected = true
      callback && callback()
    })
  },
  onMessage(callback) {
    this.ws.onMessage(res => {
      callback && callback(JSON.parse(res.data))
    })
  },
  onError(callback) {
    this.ws.onError(callback)
  },
  onClose(callback) {
    this.ws.onClose(() => {
      this.connected = false
      callback && callback()
    })
  }
}
export default WS

以上代码中，我们定义了一个名为WS的对象，包含了WebSocket实例的一些常用属性和方法，例如create()、send()、onOpen()、onMessage()、onError()和onClose()，以便于对WebSocket进行调用。此外，我们还定义了一个connected属性，用于判断WebSocket是否连接成功。

在使用WebSocket时，我们可以引入websocket.js文件，并通过create()方法创建WebSocket实例。此外，我们还需要重写页面的onUnload()生命周期方法，在页面卸载时关闭WebSocket连接。

import WS from "@/utils/websocket"

onLoad() {
  WS.create("ws://localhost:8080")
},
onUnload() {
  WS.close()
}

对于WebSocket的发送和接收消息，我们可以通过send()和onMessage()方法来实现。其中，send()方法需要传递消息体，而onMessage()方法需要传递一个回调函数，在接收到服务器的消息时会回调该函数。

WS.send({
  action: 'send',
  message: 'hello world'
})
WS.onMessage(res => {
  console.log(res)
})

以上就是对Uniapp中WebSocket的简单封装。封装后，我们可以在多个页面中使用同一个WebSocket实例，而不需要每个页面都去创建一个实例，这样既可以提高代码复用性，也可以减少资源占用。同时，通过封装，我们还可以更加方便地对WebSocket进行管理和维护，从而提高WebSocket的可靠性和稳定性。

### 回答3：
uniapp框架可以通过封装WebSocket实现基于WebSocket的应用，实现客户端和服务端的双向通信。WebSocket的封装可以使用uniapp提供的API方法，也可以使用第三方库。下面是一些Uniapp WebSocket封装的内容。

一、uniapp提供的WebSocket API方法

1. uni.connectSocket(Object object)

该方法用于连接一台WebSocket服务器。

参数：

object 必选 对象 {
　url: String,
　data: String,
　header: Object,
　method: String,
　success: Function,
　fail: Function,
　complete: Function
}

参数说明：

url: 必填，String类型，WebSocket服务器地址；

data: 非必填，String/Object/ArrayBuffer类型，需要发送的数据，在WebSocket连接成功后发送；

header: 非必填，Object类型，请求头对象；

method: 非必填，String类型，HTTP请求方法，必须是大写；

success: 非必填，Function类型，连接成功的回调函数；

fail: 非必填，Function类型，连接失败的回调函数；

complete: 非必填，Function类型，连接结束的回调函数。

2. uni.sendSocketMessage(Object object)

该方法用于向WebSocket服务器发送数据。

参数：

object 必选 对象 {
　data: String/Object/ArrayBuffer,
　success: Function,
　fail: Function,
　complete: Function
}

参数说明：

data: 必填，String/Object/ArrayBuffer类型，需要发送的数据；

success: 非必填，Function类型，数据发送成功的回调函数；

fail: 非必填，Function类型，数据发送失败的回调函数；

complete: 非必填，Function类型，数据发送结束的回调函数。

3. uni.closeSocket(Object object)

该方法用于关闭连接到WebSocket服务器的连接。

参数：

object 必选 对象 {
　code: Number,
　reason: String,
　success: Function,
　fail: Function,
　complete: Function
}

参数说明：

code: 非必填，Number类型，关闭连接的状态码，默认为1000；

reason: 非必填，String类型，关闭连接的原因，默认为"normal closure"；

success: 非必填，Function类型，关闭连接成功的回调函数；

fail: 非必填，Function类型，关闭连接失败的回调函数；

complete: 非必填，Function类型，关闭连接结束的回调函数。

4. uni.onSocketOpen(function callback)

该方法用于监听WebSocket连接成功的事件。

参数：

callback 必选 回调函数，连接成功后触发的回调函数。

5. uni.onSocketClose(function callback)

该方法用于监听WebSocket连接断开的事件。

参数：

callback 必选 回调函数，连接断开后触发的回调函数。

6. uni.onSocketError(function callback)

该方法用于监听WebSocket连接异常的事件。

参数：

callback 必选 回调函数，连接错误后触发的回调函数。

7. uni.onSocketMessage(function callback)

该方法用于监听WebSocket服务器发送的消息事件。

参数：

callback 必选 回调函数，服务器发送消息后触发的回调函数。

二、第三方库

1. easy-websocket

easy-websocket是一个轻量级的uniapp WebSocket库，它可以用来封装WebSocket的请求和监听函数。

使用方法：

a. 将easy-websocket库添加为项目依赖：

npm install easy-websocket

b. 编写WebSocket请求代码：

import easyWebsocket from 'easy-websocket'

const webSocket = new easyWebSocket({
　url: 'wss://echo.websocket.org',
});

webSocket.on('open', function() {
　console.log('连接成功');
　webSocket.send('hello world');
});

webSocket.on('error', function(e) {
　console.log('连接出错', e);
});

webSocket.on('close', function() {
　console.log('连接关闭');
});

webSocket.on('message', function(data) {
　console.log('服务器返回数据：', data);
});

2. socket.io

socket.io是一个优秀的WebSocket库，它可以在客户端和服务端之间建立实时的、双向的通信。

使用方法：

a. 安装socket.io库：

npm install socket.io-client

b. 编写客户端代码：

const socket = io('http://localhost:3000');

socket.on('connect', function() {
　console.log('连接成功');
　socket.emit('message', 'hello world');
});

socket.on('disconnect', function() {
　console.log('连接关闭');
});

socket.on('error', function(e) {
　console.log('连接出错', e);
});

socket.on('message', function(data) {
　console.log('服务器返回数据：', data);
});

在服务端，您需要安装socket.io库并启用它。在Node.js中，您可以使用以下命令安装库：

npm install socket.io

然后，您可以编写下面的服务器代码：

const io = require('socket.io')();
io.on('connection', function(socket) {
　console.log('客户端已连接');
　socket.emit('message', '服务器已连接');
　socket.on('message', function(data) {
　　　console.log('客户端发送数据：', data);
　});
　socket.on('disconnect', function() {
　　　console.log('客户端已断开');
　});
});
io.listen(3000);

三、总结

Uniapp WebSocket封装可以使用uniapp提供的API方法，也可以使用第三方库，如easy-websocket和socket.io。您可以根据实际情况选择最适合您的方法。无论哪种方法，WebSocket的封装都可以帮助您实现基于WebSocket的应用，实现客户端和服务端的双向通信。