微信小程序使用GoEasy实现websocket实时通讯


Posted in Javascript onMay 19, 2020

不需要下载安装,便可以在微信好友、微信群之间快速的转发,用户只需要扫码或者在微信里点击,就可以立即运行,有着近似APP的用户体验,使得微信小程序成为全民热爱的好东西~

同时因为微信小程序使用的是Javascript语法,对前端开发人员而言,几乎是没有学习成本和技术门槛的。对于大部分场景,都可以使用小程序快速开发实现,不论是开发周期还是开发成本都低的让人笑哭,所以受到了技术开发团队的各种追捧~

但如果要在小程序里快速的实现一个即时通讯功能,就有点尴尬,因为微信官方提供的只是一个底层的websocket api,要在项目中直接使用,还需要做很多额外的工作,比如首先就需要搭建自己的websocket服务~

那有没有简单的方式呢? 当然是有的!

今天小编就手把手的教您用GoEasy在微信小程序里,最短的时间快速实现一个websocket即时通讯Demo。

微信小程序使用GoEasy实现websocket实时通讯

本demo已经完成了真机下的小程序的测试,完整源代码开源到oschina的码云上,clone后,只需要将代码里的appkey换成自己的common key,就可以体验了, 源码网址:https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

1、获取appkey

GoEasy官网上注册账号,创建一个应用,拿到您的appkey。

微信小程序使用GoEasy实现websocket实时通讯

GoEasy提供了两种类型的appkey:

  • Common key: 即可以接收消息,也可以发送消息,与Subscribe Key最大的区别就是有写权限,可以发消息。适用于有消息发送需求的客户端和服务端开发。
  • Subscribe key: 只能接收消息,不可以发送消息,与Common Key最大的区别就是没有写权限,只能收消息。可以用于一些没有发送需求的客户端。

2、获取GoEasy SDK

下载https://cdn.goeasy.io/download/goeasy-1.0.11.js

import GoEasy from './goeasy-1.0.11';

3、初始化GoEasy对象

var self = this;
this.goeasy = GoEasy({
 host: 'hangzhou.goeasy.io',
 appkey: "您的appkey",
 onConnected: function () {
  console.log("GoEasy connect successfully.");
  self.unshiftMessage("连接成功.");
 },
 onDisconnected: function () {
  console.log("GoEasy disconnected.")
  self.unshiftMessage("连接已断开.");
 },
 onConnectFailed: function (error) {
  console.log(error);
  self.unshiftMessage("连接失败,请检查您的appkey和host配置");
 }
})

 

根据您在GoEasy后台创建应用时选择的区域,来传入不同的Host,如果您创建GoEasy应用时,选择了杭州,那么host:"hangzhou.goeasy.io"。选择了新加坡,host:"singapore.goeasy.io"。

如果您的大部分用户都是在国内,创建应用时,记得选择杭州,以便获得更快的通讯速度。

4、小程序端接收消息

var self = this;
this.goeasy.subscribe({
 channel: "my_channel",
 onMessage: function (message) {
  self.unshiftMessage(message.content);
 },
 onSuccess: function () {
  self.unshiftMessage('订阅成功.');
 }
});

 

很多朋友会问channel从哪里来,如何创建,应该传入什么呢?

根据您的业务需求来设定,channel可以为任意字符串,除了不能包含空格,和不建议使用中文外,没有任何限制,只需要和消息的发送端保持一致,就可以收到消息。channel可以是您直播间的uuid,也可以是一个用户的唯一表示符,可以任意定义,channel不需要创建,可以随用随弃。

5、小程序端发送消息:

发送时,需要注意channel一定要和subscribe的channel完全一致,否则无法收到。

this.goeasy.publish({
 channel: "my_channel",
 message: self.data.message,
 onSuccess: function () {
  self.setData({
   message: ''
  }); //清空发送消息内容
  console.log("send message success");
 },
 onFailed: function (error) {
  self.unshiftMessage('发送失败,请检查您的appkey和host配置.');
 }
});

本代码源码下载:https://gitee.com/goeasy-io/GoEasyDemo-wxapp-Helloworld

特别强调:

在运行之前,一定要在微信公众号平台配置socket合法域名,否则无法建立连接。具体步骤:
访问mp.weixin.qq.com,进入微信公众平台|小程序 -> 设置 -> 开发设置 -> 服务器域名
socket合法域名-> 添加GoEasy的地址: wx-hangzhou.goeasy.io(记得wx-开头)
若您创建GoEasy应用时选择了新加坡区域则添加地址:wx-singapore.goeasy.io

答疑时间:

1、我的服务器端可以给小程序发送消息吗?都支持些哪些语言?

当然可以,任何语言都可以通过调用GoEasy的Rest API发送消息,同时为了大家方便,GoEasy的官方文档里,也准备了Java, C#,NodeJS,PHP,Ruby和Python等常见语言调用REST API的代码。

2、GoEasy可以发送图片,语音和视频吗?

当然可以,您可以通过推送文件路径的方式来实现文件的发送。按照行业惯例,不论MSN,微信,QQ对于图片和视频,通常的做法都是,只推送文件路径,而不会推送文件本身。你如果有注意的话,当您接受图片和视频的时候,收到消息后,等一会儿才能看,就是因为发送的时候,只发送了路径。

3、GoEasy和微信小程序官方的websocket API有什么区别和优势?

小程序官方的websocket API主要是用来与您的websocket服务通讯,所以使用小程序websocket的前提是,首先要搭建好您自己的websocket服务,然后与之通讯。这是一个纯技术的API,在建立网络连接后,还有很多的工作需要自己来完成,比如:

  • 需要自己实现心跳机制,来维护网络连接,来判断客户端的网络连接状态;
  • 需要自己实现断网自动重连;需要自己维护消息列表,确保遇到断网重连后,消息能够补发;
  • 需要自己维护一个客户端列表;
  • 等等很多细致而繁杂的工作,比如websocket的安全机制和性能优化;

此之外服务端也有很多工作需要自己完成,有兴趣自己搭建websocket的话,可以参考这篇技术分享《搭建websocket消息推送服务,必须要考虑的几个问题》

而GoEasy是一个成熟稳定的企业级websocket PAAS服务平台,开发人员不需要考虑websocket服务端的搭建,只需要几行代码,就可以轻松实现客户端与客户端之间,服务器与客户端之间的的websocket通信,不需要考虑性能,安全,高可用集群的问题,只需要全力专注于开发自己的业务功能就好了。

GoEasy已经内置websocket中必备的心跳,断网重连,消息补发,历史消息和客户端上下线提醒等特性,开发人员也不需要自己搭建websocket服务处理集群高可用,安全和性能问题。GoEasy已经稳定运行了5年,支持千万级并发,成功支撑过很多知名企业的重要活动,安全性和可靠性都是久经考验。

4、GoEasy在小程序的开发中主要用在那些场景呢?

从应用场景上来说,所有需要websocket通信的场景,GoEasy都可以完美支持:

  • 聊天,IM,直播弹幕,用户上下线提醒, 在线用户列表
  • 扫码点菜,扫码登录, 扫码支付, 扫码签到, 扫码打印
  • 事件提醒,工单,订单实时提醒
  • 在线拍卖, 在线点餐,在线选座 实时数据展示,实时监控大屏, 金融实时行情显示,设备监控系统
  • 实时位置跟踪,外卖实时跟踪,物流实时跟踪
  • 远程画板,远程医疗,游戏,远程在线授课

5、GoEasy的文档为什么这么简单?简单到我都不知道如何使用

简单还不好吗?GoEasy从研发的第一天,就把追求API的极简作为我们的工作重点。严格控制接口的数量,就是是为了降低开发人员的学习成本,其实就是为了让您爽啊!但这并不影响GoEasy完美支持所有的websocket即时通讯需求。

总结

到此这篇关于微信小程序使用GoEasy实现websocket实时通讯的文章就介绍到这了,更多相关微信小程序 GoEasy实时通讯内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
HTML 自动伸缩的表格Table js实现
Apr 01 Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JSON中key动态设置及JSON.parse和JSON.stringify()的区别
Dec 29 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
nuxt引入组件和公共样式的操作
Nov 05 Javascript
jQuery 动画与停止动画效果实例详解
May 19 #jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 #jQuery
通过js随机函数Math.random实现乱序
May 19 #Javascript
javascript实现获取中文汉字拼音首字母
May 19 #Javascript
微信小程序实现菜单左右联动
May 19 #Javascript
JS array数组检测方式解析
May 19 #Javascript
基于JS实现table导出Excel并保留样式
May 19 #Javascript
You might like
农民C键的运用技巧
2020/03/04 星际争霸
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP中HTML标签过滤技巧
2014/01/07 PHP
php调用c接口无错版介绍
2014/03/11 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
在vue中使用console.log无效的解决
2020/08/09 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
[48:00]完美世界DOTA2联赛循环赛 Forest vs Inki BO2第二场 11.04
2020/11/04 DOTA
python opencv之分水岭算法示例
2018/02/24 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python标准库OS模块详解
2020/03/10 Python
python中列表的含义及用法
2020/05/26 Python
Django实现随机图形验证码的示例
2020/10/15 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
德国网上宠物店:Zoobio
2018/05/23 全球购物
出国考察邀请函
2014/01/21 职场文书
收银员岗位职责
2014/02/07 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
学校欢迎标语
2014/06/18 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL