微信小程序——WebSocket

最新推荐文章于 2025-03-24 14:41:36 发布

树旅小爷

最新推荐文章于 2025-03-24 14:41:36 发布

阅读量352

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/milk_tiger/article/details/104679010

版权

WebSocket：

向服务器发送数据，服务器响应数据。通过监听WebSocket可以知道服务器给我们发回了什么数据

API：
1.wx.connectSocket：创建一个 WebSocket 连接

2.wx.onSocketOpen：成功连接了服务器，通过此接受回调
header：连接成功的 HTTP 响应 Header

3.wx.onSocketError：出现错误

4.wx.sendSocketMessage：往服务器发送数据。需要先 wx.connectSocket，并在 wx.onSocketOpen 回调之后才能发送

5.wx.onSocketMessage：监听服务器发回的消息

6.wx.CloseSocket：手动关闭连接

7.wx.onSocketClose：服务器主动关闭，可能网络不好


<!--index.wxml-->
<view class="container">
  <button type="default" bindtap="openBtnClick">开启连接</button>
  <button

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

树旅小爷

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

小程序之websocket

前端-黎姿

03-03

451

使用之前肯定首先要了解一下websocket是什么，简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道，请求只需要请求一次，而且还可以从通道实时获取服务器数据，非常适合应用到实时应用上。 **wx.connectSocket(OBJECT) ** 创建一个 WebSocket连接；一个微信小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。 OBJECT参数说明：示例代码： **wx

微信小程序——监听websocket错误

FutrueJet的博客

06-22

6773

微信小程序——监听websocket错误

参与评论您还未登录，请先登录后发表或查看评论

微信小程序之WebSocket

09-28

为什么需要websocket？传统的实时交互的游戏，或服务器主动发送消息的行为（如推送服务），如果想做在微信上，可能你会使用轮询的方式进行，不过这太消耗资源，大量的请求也加重了服务器的负担，而且延迟问题比较严重。如果是自己开发的app，为了解决这些问题，很多团队会自建socket，使用tcp长链接、自定协议的方式与服务器进行相对实时的数据交互。有能力的团队，采用这种方式自然没什么大问题。不过小团队可能就要花费很多时间去调试，要解决很多难题，这个在成本上就划不来。 H5引入了webSocket来解决网页端的长链接问题，而微信小程序也支持websocket。这是一个非常重要的特性，所以本系列的文章会专门拿出一篇来讨论websocket。 webSocket本质上也是TCP连接，它提供全双工的数据传输。一方面可以避免轮询带来的连接频繁建立与断开的性能损耗，另一方面数据可以是比较实时的进行双向传输（因为是长链接），而且WebSocket允许跨域通信（这里有个潜在的跨域安全的问题，得靠服务端来解决）。目前除IE外的浏览器已经对webSocket支持得很好了，微信小程序再推一把之后，它会变得更加流行。我们来设计一个新的demo，一个比较有趣的小游戏，多人版扫雷，准确地讲，多人版挖黄金。游戏规则是这样的：把雷换成金子，挖到金子加一分，每人轮流一次（A挖完轮到B，B挖完A才能再点击），点中金子就算你的，也不会炸，游戏继续，直到把场上所有的金子都挖完游戏才结束。跟扫雷一样，数字也是表示周边有几个金子，然后用户根据场上已经翻出来的数字来猜哪一格可能有金子。这种交互的游戏难点在于，用户的点击操作都要传到服务器上，而且服务器要实时的推送到其它玩家的应用上。另外用户自己也要接收对方操作时实时传过来的数据，这样才不至于重复点中同一个格子。简单讲，就是你要上报操作给服务器，而服务器也要实时给你推消息。为了简化整个模型，我们规定玩家必须轮流来点击，玩家A点完后，才能轮到玩家B，玩家B操作完，玩家A才能点。我们分几步来实现这个功能。一、实现思路 1、第一步，我们要先生成扫雷的地图场景这个算法比较简单，简述一下。随机取某行某列就可以定位一个格子，标记成金子（-1表示金子）。mimeCnt表示要生成的金子的数量，用同样的方式循环标记mimeCnt个随机格子。生成完后，再用一个循环去扫描这些-1的格子，把它周边的格子都加1，当然必须是非金子的格子才加1。代码放在这里。其中increaseArround用来把这格金子周边的格子都加1，实现也比较简单：执行genMimeArr()，随机生成结果如下： -1表示金子。看了下貌似没什么问题。接下去，我们就要接入webSocket了。（这个是js版本的，其实生成地图场景的工作是在后台生成，这个js版本只是一个演示，不过算法是一样的。） 2、我们需要一个支持webSocket的服务端本例子中，我们使用python的tornado框架来实现（tornado提供了tornado.websocket模块）。当然读者也可以使用socket.io，专为webSocket设计的js语言的服务端，用起来非常简单，它也对不支持webSocket的浏览器提供了兼容（flash或comet实现）。笔者本人比较喜欢使用tornado，做了几年后台开发，使用最多的框架之一的就是它，NIO模型，而且非常轻量级，同样的rps，java可能需要700-800M的内存，tornado只要30-40M，所以在一台4G内存的机子上可以跑上百个tornado服务，而java，对不起，只能跑3个虚拟机。微服务的时代，这一点对小公司很重要。当然如果读者本人对java比较熟悉的话，也可以选择netty框架尝试一下。 webSocket用tornado的另一个好处是，它可以在同一个服务（端口）上同时支持webSocket及http两种协议。tornado的官方demo代码中展示了怎么实现同时使用两种协议。在本游戏中，可以这么用：用户进入首页，用http协议去拉取当前的房间号及数据。因为首页是打开最多的，进了首页的用户不一定会玩游戏。所以首页还没必要建立webSocket链接，webSocket链接主要用来解决频繁请求及推送的操作。首页只有一个请求操作。选了房间号后，进去下一个游戏页面再开始建立webSocket链接。 3、客户端使用微信小程序开发工具，直接连接是会报域名安全错误的，因为工具内部做了限制，对安全域名才会允许连接。所以同样的，这里我们也继续改下工具的源码，把相关的行改掉就行修改方式如下：找到asdebug.js的这一行，把它改成: if(false)即可。

微信小程序websocket聊天

03-01

微信小程序websocket聊天前端实现，可以发语音、图片、文字。

微信小程序中使用WebSocket通信

最新发布

ljw的博客

03-24

1046

因为所有的fagmenl都继承BaseFragment，所有上面的fagmen是BaseFragment，至于如何确认是哪个具体的fagment，后面会说明。三、以上便是微信小程序中WebSocket的封装和使用；至此，activity接收WebSocket消息、分发给对应的fragment、fragment处理对应的业务整个链路已经通了。在processLogic中初始化WebSocket的连接。至此，activity中的fragment便确认了。

微信小程序的socket

qq_44818983的博客

07-12

440

这是微信小程序的socket包，用法与socket一致。

关于小程序中的websocket

qq_70029982的博客

08-31

603

参数是一个回调函数，函数体中的代码在 WebSocket 连接打开时执行。参数是一个回调函数，函数体中的代码在 WebSocket 连接关闭时执行。关闭 WebSocket 连接。- `complete`：可选，WebSocket 连接创建完成后的回调函数。- `code`：可选，关闭连接的状态码，默认是 1000。- `complete`：可选，发送完成的回调函数。- `success`：可选，发送成功的回调函数。- `fail`：可选，发送失败的回调函数。- `reason`：可选，关闭连接的原因。

微信小程序开发——websocket（socket在线测试服务器，或本地socket服务器）-附件资源

03-02

微信小程序开发——websocket（socket在线测试服务器，或本地socket服务器）-附件资源

微信小程序——[小游戏类]你画我猜（截图+源码）.zip

04-17

微信小程序是一种轻量级的应用开发平台，主要针对移动端，尤其是智能手机用户。它允许开发者通过一套特定的开发工具和框架，创建出能在微信内运行的小型应用程序。在这个"你画我猜"的小游戏项目中，我们可以深入探讨...

微信小程序：websocket

ScumStudy的博客

12-29

671

服务端服务器使用的是node.js配置创建node.js环境先建立一个新的文件夹server 下载ws模块：npm install ws 下载完毕引入ws模块的构造函数并实例化新建app.js文件，用来编写代码，引入ws模块并且实例化 //引入ws模块的构造函数 var webSocketServer = require("ws").Server; //实例化 var wss = new webSocketServer({ port: 3001 }); 监听前端发送的信息

微信小程序-WebSocket

xiangxiongfly

09-25

4004

微信小程序官方提供了 WebSocket API，允许服务器主动向微信小程序发送消息。

WebSocket测试小程序

11-15

WebSocket测试小程序WebSocket测试小程序WebSocket测试小程序WebSocket测试小程序

微信小程序webSocket的使用方法

11-20

博客简介本篇博客介绍微信小程序中webSocket的使用方法，以及如何用局部网络建立webSocket连接，进行客户端与服务器之间的对话： webSocket简介 微信小程序端API调用服务器端使用nodejs配置演示websocket webSocket简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

微信小程序-微信小程序的SocketIO客户端

08-07

Community Slack weapp-socket-io 微信小程序的 Socket.io client 实现，压缩之后体积为 16K > 为了让开发者已最低的成本上手，本类库封装了与 socket.io 一致的 API 供开发者调用。 Demo 使用 socket.io 官网的 chat demo server 实现的小程序版聊天室应用使用 “微信开发者工具” 将 weapp_demo 目录打开，运行调试即可 Features 目前已支持 Namespace Singleton Reconnect Build npm run build 生产环境可使用 NODE_ENV=production npm run build 进行压缩编译 How to use npm npm install wxapp-socket-io manual 拷贝 dist 目录的 index.js 文件到你的项目目录，并 require const io = require('yourPath/build/index.js') 为了使用风格与 socket.io 完全一致 const new

微信小程序 websocket

u013183495的专栏

11-21

5816

目的：使用Node js 搭建websocket （wss微信需要安全的websocket），演示不同群组聊天需要知道一点点node相关操作即可 node 服务端代码 var https=require('https'); var ws=require('ws'); var fs=require('fs'); var keypath=process.cwd()+'/server.key

小程序WebSocket详解