jjzjj

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

西呱不加糖 2024-04-05 原文

该教程基于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版本的聊天室的客户端基本功能讲解完毕了，如果有疑问的地方，可以在评论进行提问。

webSocketuniappspanclasstokenuni-app网络协议

有关【史上最简单webSocket】uniapp＋webSocket 聊天室【客户端】的更多相关文章

  1. ruby - 简单获取法拉第超时 - 2

    有没有办法在这个简单的get方法中添加超时选项？我正在使用法拉第3.3。Faraday.get(url)四处寻找，我只能先发起连接后应用超时选项，然后应用超时选项。或者有什么简单的方法？这就是我现在正在做的:conn=Faraday.newresponse=conn.getdo|req|req.urlurlreq.options.timeout=2#2secondsend 最佳答案 试试这个:conn=Faraday.newdo|conn|conn.options.timeout=20endresponse=conn.get(url

  2. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  3. ruby-on-rails - 简单的 Ruby on Rails 问题——如何将评论附加到用户和文章？ - 2

    我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。

  4. ruby - 使用 Ruby 通过 Outlook 发送消息的最简单方法是什么？ - 2

    我的工作要求我为某些测试自动生成电子邮件。我一直在四处寻找，但未能找到可以快速实现的合理解决方案。它需要在outlook而不是其他邮件服务器中，因为我们有一些奇怪的身份验证规则，我们需要保存草稿而不是仅仅发送邮件的选项。显然win32ole可以做到这一点，但我找不到任何相当简单的例子。 最佳答案 假设存储了Outlook凭据并且您设置为自动登录到Outlook，WIN32OLE可以很好地完成此操作:require'win32ole'outlook=WIN32OLE.new('Outlook.Application')message=

  5. postman——集合——执行集合——测试脚本——pm对象简单示例02 - 2

    //1.验证返回状态码是否是200pm.test("Statuscodeis200",function(){pm.response.to.have.status(200);});//2.验证返回body内是否含有某个值pm.test("Bodymatchesstring",function(){pm.expect(pm.response.text()).to.include("string_you_want_to_search");});//3.验证某个返回值是否是100pm.test("Yourtestname",function(){varjsonData=pm.response.json

  6. Qt Designer的简单使用 - 2

    在前面两节的例子中，主界面窗口的尺寸和标签控件显示的矩形区域等，都是用C++代码编写的。窗口和控件的尺寸都是预估的，控件如果多起来，那就不好估计每个控件合适的位置和大小了。用C++代码编写图形界面的问题就是不直观，因此Qt项目开发了专门的可视化图形界面编辑器——QtDesigner（Qt设计师）。通过QtDesigner就可以很方便地创建图形界面文件*.ui，然后将ui文件应用到源代码里面，做到“所见即所得”，大大方便了图形界面的设计。本节就演示一下QtDesigner的简单使用，学习拖拽控件和设置控件属性，并将ui文件应用到Qt程序代码里。使用QtDesigner设计界面在开始菜单中找到「Q

  7. ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2

    给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案 使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

  8. ruby - Faye WebSocket，关闭处理程序被触发后重新连接到套接字 - 2

    我有一个super简单的脚本，它几乎包含了FayeWebSocketGitHub页面上用于处理关闭连接的内容:ws=Faye::WebSocket::Client.new(url,nil,:headers=>headers)ws.on:opendo|event|p[:open]#sendpingcommand#sendtestcommand#ws.send({command:'test'}.to_json)endws.on:messagedo|event|#hereistheentrypointfordatacomingfromtheserver.pJSON.parse(event.d

  9. ruby - 在 Ruby 中搜索大文件的更简单方法？ - 2

    我正在编写一个简单的日志嗅探器，它将在日志中搜索表明我支持的软件存在问题的特定错误。它允许用户指定日志路径并指定他们想要搜索多少天前。如果用户关闭日志滚动，日志文件有时会变得非常大。目前我正在做以下事情(虽然还没有完成):File.open(@log_file,"r")do|file_handle|file_handle.eachdo|line|ifline.match(/\d+++-\d+-\d+/)etc...line.match显然会查找我们在日志中使用的日期格式，其余逻辑将在下面。但是，有没有更好的方法来搜索没有.each_line的文件？如果没有，我完全同意。我只是想确保我使

  10. ruby - 在 TCPServer (Ruby) 中，我如何从客户端获取 IP/MAC？ - 2

    我想在Ruby的TCPServer中获取客户端的IP地址。以及(如果可能的话)MAC地址。例如，Ruby中的时间服务器，请参阅评论。tcpserver=TCPServer.new("",80)iftcpserverputs"Listening"loopdosocket=tcpserver.acceptifsocketThread.newdoputs"Connectedfrom"+#HERE!HowcanigettheIPAddressfromtheclient?socket.write(Time.now.to_s)socket.closeendendendend非常感谢!

随机推荐