【史上最简单webSocket】uniapp＋webSocket 聊天室【客户端】

uniapp地址：
https://uniapp.dcloud.net.cn/api/request/websocket.html
https://uniapp.dcloud.net.cn/api/request/socket-task.html
这两个网址的api都有用到，接下来会进行讲解说明

先讲一下整体的思路，也就是整个过程的走法和流程应该是怎么样的。
1、申请连接
2、回调方法，打开socket
3、发送/接收处理消息等逻辑

1、申请连接

看上图，在 WebSocketAPI中，我们可以看到uni.connectSocket()方法就是用于创建连接的。

用法

最简单的使用方式就是直接给个url，这就直接申请连接了。

除url这个参数之外，还有其他的参数，具体见官网
【可以加数据，header，成功请求回调，失败请求回调等】

uni.connectSocket({
	url: 'wss://www.example.com/socket'
)};

如果需要返回值，该方法的调用是能有个返回值的

var socketTask = uni.connectSocket({
	url: 'wss://www.example.com/socket'
});

这个返回值有什么用呢？这就需要回到前面，我们为什么有两个不同的网址，因为这个返回值，是调用第二个网址里面的API的必要对象。

可以非常明显看到，这些方法的调用，都需要SocketTask这个对象

2、回调方法，打开socket

1、为什么需要回调呢？因为看发送消息的方法，我们可以发现，发送消息和接收消息，都需要在回调某个方法之后才能。

2、为什么在回调某个方法之后才能发送或者接收消息呢？原因是，我们之前的uni.connectSocket()是申请连接，而不是成功连接，这点是需要重点注意的！！！很多新手都会卡在这一步
【这点文档没有说到，但是是我们需要注意的一个点】

用法

法子1：
uni.onSocketOpen(CALLBACK)
监听WebSocket连接打开事件。

<!--在调用uni.connectSocket()之后，就会回调该方法-->
uni.onSocketOpen(function (res) {
  console.log('WebSocket连接已打开！');
});

法子2：
SocketTask.onOpen(CALLBACK)
监听 WebSocket 连接打开事件

<!--在调用uni.connectSocket()之后，通过返回的对象回调该方法-->
socketTask.onOpen(function (res) {
  console.log('WebSocket连接已打开！');
});

作者的话

对于上述两种方法，应该使用哪一种？
经过我的测试，建议并且推荐第二种用法，采用返回值，拿到socketTask对象进行调用指定方法。
原因如下：
1、在多人聊天室的测试中发现，用户在第一次进入聊天室时，申请连接后会进行回调，完成连接，但是！！如果用户切出去，断开连接后，重新进入聊天室，将会再此申请连接，but！！不会进行回调，也就是不会调用uni.onSocketOpen方法，这就导致了连接并没有完成，导致不能发送消息和接收消息了。

• 具体的原因暂时未知，所以建议直接采用对象调用指定方法，这也是我前面为什么写两个连接出现的原因。

3、发送消息

法子1

uni.sendSocketMessage(OBJECT)
注意！该法需要在uni.onSocketOpen回调之后才能使用

<!--具体用法-->
uni.sendSocketMessage({
   data: msg
 });

1、需要注意的是，传递给后端的数据将会是字符串类型的，所以data后面跟着什么，就会传递什么，如果需要传递JSON格式的数据，需要自己封装与一下，加上{}形成JSON格式的数据
2、并且重中之中的一点就是，需要在uni.onSocketOpen回调之后才能使用！这点很容易踩坑。

法子2

SocketTask.send(OBJECT)
注意！该法需要拿到socketTask对象才能使用

SocketTask.send({
   data: msg
 });

这里也有需要注意的点，这里的data数据的传递也是字符串类型的

作者的话

上述两种法子，作者本人还是更加推荐第二种，直接采用对象调用，这样子能避免官方封装而导致的一些问题，容错率和兼容度会更加高

• 其他方法，比如监听错误的返回、监听WebSocket接受到服务器的消息事件等，大伙可以看看官方文档，理解了我上面说的三点，后面的基本上很简单。
• 最后，对于监听WebSocket接受到服务器的消息这个方法，也是有两个法子的，作者依旧是建议，采用对象调用的方法，容错率和兼容度会更高。

到此，uniapp版本的聊天室的客户端基本功能讲解完毕了，如果有疑问的地方，可以在评论进行提问。