本文主要讲一下如何建立一个基于node.js的WebSocket服务器,并在小程序中使用这个提供实时服务的服务器。
引用
H5程序俱乐部微信号:wxappclub
「H5程序俱乐部」是一个专注微信小程序学习交流,相关外包/招聘需求信息发布的微信公众号
每天发布微信小程序设计/开发/运维知识,小程序最新资讯,外包需求信息/相关人才招聘信息
node.js中已经有很多现成的第三方库,用于构建WebSocket服务。我们今天选用一个叫做websocket的库,来构建一个可以提供标准WebSocket接口的node.js服务端程序。
先建一个空文件夹,名叫ws-server,然后进入该文件夹,在命令行执行:
npm install websocket
然后在ws-server文件夹下,再新建一个名为app.js的文件,内容如下:
因为WebSocket服务是建立在HTTP之上的,所以我们看到,代码中建立了一个http server, 然后建立了一个使用了该http server的WebSocket server,并让http server监听8080端口对外提供服务。
这个服务端的功能也很简单,就是收到客户端发送的消息并打印出来,然后在接收到的消息前面加上一个[from server]的前缀后,返回给客户端。
好,我们来实现调用该服务的微信小程序代码:
首先我们需要用wx.connectSocket()方法去连接目标服务器,因为我们开发环境用的是非安全的http,所以这边的url参数是ws://打头的,在以后微信的实际运行环境中,你的服务端必须使用SSL,所以连接url就会是wss://的了。
然后需要调用wx.onSocketOpen()方法来设置WebSocket连接打开时的回调函数。当连接打开后,就可以开始向服务端发送数据了,我们在这里使用wx.sendSocketMessage()方法,向服务端发送了一个后面跟随一个随机数的Hello,World字符串。我们运行一下程序,可以看到,服务端的控制台上会打印出这样的结果:
说明服务端已经成功接收到了客户端发送的字符串消息。
之后服务端会向客户端再反馈这个消息,那客户端这边如何接收这个从服务端过来的消息呢?我们可以在小程序中,使用wx.onSocketMessage()方法,监听服务端发送到客户端的消息,正如我们上面的示例代码写的那样:
wx.onSocketMessage(function (msg) {
console.log(msg)
})
我们在小程序的Console上,简单的打印了从服务端过来的消息,如下所示:
这样,一个简单但完整的客户端和服务器端的WebSocket交互就完成了。如果你想关闭这个WebSocket连接,那么你可以调用wx.closeSocket()来进行关闭。
体验最新
房贷计算器:
http://m.dai361.com
- 大小: 279.6 KB
- 大小: 22.8 KB
- 大小: 5.3 KB
- 大小: 17.3 KB
分享到:
相关推荐
本文主要讲一下如何建立一个基于node.js的WebSocket服务器,并在小程序中使用这个提供实时服务的服务器。 node.js中已经有很多现成的第三方库,用于构建WebSocket服务。我们今天选用一个叫做websocket的库,来构建一...
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。...
本资源是一个微信小程序Demo,旨在帮助开发者学习和实践微信小程序中的长连接(WebSocket)技术。通过修改和扩展这个示例,开发者可以更深入地理解WebSocket在小程序中的应用,为自己的项目添加实时通信功能。 该...
#客户端 - 微信小程序 通过 wx.connectSocket 来创建 WebSocket 连接,来连接搭载好的Node服务器,连接之后发送数据可以通过 wx.sendSocketMessage ,可以发送数据到达客户端,同时也需要监听接收来自客户端发出的...
# 微信小程序-树莓派照片监控 ### 说明: 实现树莓派照片监控功能,特色: - 小程序和服务器使用webSocket通信 - 树莓派和服务器使用mqtt通信
H5引入了webSocket来解决网页端的长链接问题,而微信小程序也支持websocket。这是一个非常重要的特性,所以本系列的文章会专门拿出一篇来讨论websocket。 webSocket本质上也是TCP连接,它提供全双工的数据传输。一...
"鲜花销售微信小程序"是一个基于微信平台的电子商务应用,旨在为用户提供方便快捷的在线购买...总的来说,"鲜花销售微信小程序"结合了当前流行的小程序技术和电子商务需求,提供了一个全面、高效、用户友好的购物平台。
项目背景:小程序中实现实时聊天功能 一、服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二、nginx中配置反向代理加密websocket(wss) upstream ...
微信小程序 WebSocket 实例效果: 今天主要说一下微信的WebSocket接口以及在小程序中的使用。 WebSocket是什么(简述) 微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在...
如果您下载了本程序,但是该程序存在问题无法运行,那么您可以选择退款或者寻求我们的帮助(如果找我们帮助的话,是...然而,使用爬虫需要遵守法律和伦理规范,尊重网站的使用政策,并确保对被访问网站的服务器负责。
微信小程序对第三方服务端的网络通信方式支持https和Websocket。WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。为了解决HTTP协议效率低下的问题,HTML5定义了WebSocket协议,能更好的节省...
微信小程序前端通信使用weapp.socket.io,后端使用socket.io@2.3.0,基于node.js开发。群聊界面目前只支持发送文字,私聊界面的话可以发送文字图片语音。适用于正在学习 此类相关的学生、一些课程项目的需求、对微信...
chatgpt微信聊天小程序。java编写服务器,实现chatgpt接口的调用,微信小程序用于聊天。二者基于webSocket进行通信.zip
java编写服务器,实现chatgpt接口的调用,微信小程序用于聊天。二者基于webSocket进行通信 微信小程序是腾讯公司基于微信平台推出的一种轻量级应用形态,它无需用户下载安装即可在微信内直接使用。自2017年正式上线...
微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信。 因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,...
微信的WebSocket接口和HTML5的WebSocket基本一样,是HTTP协议升级来的,做为一个新的Socket在B/S上使用,它实现了浏览器与服务器全双工通信。 因为这里是做小程序,所以就不对WebSocket的底层和协议做过多的说明了,...
- 新增本博客配套的**微信小程序**,可随时用手机浏览文章。并且接入微信登录,减少注册成本。 - **微信小程序**新增每日新闻热搜功能、可随时查看热搜。 - 新增本博客配套的**App**,同时接入qq、微博登录,使用...
实时通信技术:使用WebSocket协议实现实时数据传输,方便用户实时接收任务更新和消息通知。 第三方登录:集成微信登录功能,方便用户快速注册和登录。 功能方面,在线办公小程序提供了以下功能: 任务管理:用户...