WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

今天简单讲解下微信小程序的webSocket如何使用:

微信webSocketAPI直通车

以下webSocket是本人使用微信小程序api写的一些步骤封装,主要是小程序端的实现,真正实现webSocket项目还要后台人员的给力支持。

小程序中,可以在onLoad方法开始一个webSoket连接,在onHide时关闭连接。

  1. var sotk = null;
  2. var socketOpen = false;
  3. var wsbasePath = "ws://开发者服务器 wss 接口地址/";
  4.  
  5. //开始webSocket
  6. webSocketStart(e){
  7. sotk = wx.connectSocket({
  8. url: wsbasePath,
  9. header: { 'content-type': 'application/x-www-form-urlencoded' },
  10. method: "POST",
  11. success: res => {
  12. console.log('小程序连接成功:', res);
  13. },
  14. fail: err => {
  15. console.log('出现错误啦!!' + err);
  16. wx.showToast({
  17. title: '网络异常!',
  18. })
  19. }
  20. })
  21.  
  22. this.webSokcketMethods();
  23.  
  24. },
  25.  
  26. //监听指令
  27. webSokcketMethods(e){
  28. let that = this;
  29. sotk.onOpen(res => {
  30. socketOpen = true;
  31. console.log('监听 WebSocket 连接打开事件。', res);
  32. })
  33. sotk.onClose(onClose => {
  34. console.log('监听 WebSocket 连接关闭事件。', onClose)
  35. socketOpen = false;
  36. })
  37. sotk.onError(onError => {
  38. console.log('监听 WebSocket 错误。错误信息', onError)
  39. socketOpen = false
  40. })
  41.  
  42. sotk.onMessage(onMessage => {
  43. var data = JSON.parse(onMessage.data);
  44. console.log('监听WebSocket接受到服务器的消息事件。服务器返回的消息',data);
  45.  
  46. })
  47.  
  48. },
  49.  
  50. //发送消息
  51. sendSocketMessage(msg) {
  52. let that = this;
  53. if (socketOpen){
  54. console.log('通过 WebSocket 连接发送数据', JSON.stringify(msg))
  55. sotk.send({
  56. data: JSON.stringify(msg)
  57. }, function (res) {
  58. console.log('已发送', res)
  59. })
  60. }
  61.  
  62. },
  63. //关闭连接
  64. closeWebsocket(str){
  65. if (socketOpen) {
  66. sotk.close(
  67. {
  68. code: "1000",
  69. reason: str,
  70. success: function () {
  71. console.log("成功关闭websocket连接");
  72. }
  73. }
  74. )
  75. }
  76. },

快速上手微信小程序webSocket的更多相关文章

  1. 快速上手微信小程序-快递100

    2007 年 1 月 9 日,乔布斯在旧金山莫斯科尼会展中心发布了首款 iPhone,而在十年后的 1 月 9 日,微信小程序正式上线.张小龙以这样的形式,向乔布斯致敬. 小程序在哪里? 小程序功能模 ...

  2. 微信小程序websocket

    微信小程序websocket 微信小程序带有websocket可以提供使用,但是官方文档写的东西很少,而且小程序后台能力弱这一点也是十分的坑爹,这就导致了socket长连接一切后台就会出现断开的情况, ...

  3. 快速开发微信小程序

    image.png 最近婷主在做微信小程序.自己的微信公众号也需要添加点料,乘着这次放假,把微信小程序研究了下.虽然没有做什么很强大的功能,不过好歹自己的公众号也有了微信小程序.够用即可. 1.需要先 ...

  4. 微信小程序 WebSocket 使用非 443 端口连接

    前言 微信小程序支持使用 WebSocket 连接到服务器,准确地说是带 SSL 的 WebSocket,而微信小程序中不允许使用带端口的 wss 连接,只能使用 443 端口.想使用其他端口就需要在 ...

  5. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  6. 微信小程序-WebSocket

    wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...

  7. 微信小程序-WebSocket应用

    为何有 HTTP 协议还需要 WebSocket ? Http协议 有个缺陷:通信只能由客户端发起.举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果.HTTP 协议做不 ...

  8. (转)快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

    微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程, ...

  9. 两小时快速构建微信小程序

    小程序在2017年1月上线之初,被社会极力吹捧,刻意去将其制造为一个“风口”,透支其价值.但是在之后一个月里,石破天惊迅速归为沉寂.媒体又开始过度消费小程序,大谈其鸡肋之处. 个人认为小程序的一个分水 ...

随机推荐

  1. Java 的反射机制你了解多少?

    不知道多少次听说过了Java反射机制的使用,比如:Spring 框架如何实例化IoC容器中的Bean,编码过程中如何动态的清理对象中的字段信息等等.工作中只是听说.看同事们编码实践,但是自己却只是概念 ...

  2. 吉他自学用Guitar Pro好不好?

    很多人心中都有一个吉他梦,可苦于没有坚持下来.其实一个人自学吉他过程是非常枯燥的.经常手上被磨得都是茧,但是也不清楚自己弹的到底对不对. 如果不跟着老师练习,那很有可能就走了歪路或者是无法长期坚持.所 ...

  3. Boom 3D的本地音乐播放功能大放送

    众所周知,Boom 3D是一款音效增强软件.但是Boom 3D不仅可以用来增强音效,还可以用作本地音乐播放器,以无与伦比的效果播放本地存储的歌曲,并创建播放列表来整理您的音乐收藏,就像个人音乐播放器应 ...

  4. Guitar Pro吉他指弹入门——双手泛音

    曾经有一段时间在琴行里经常遇到有人来试琴,很多人试弹得曲子就是郑成河的<Flaming>,直译过来就是热情的意思.这首曲子里面有很多泛音存在,吉他泛音类似于钟鸣或者摇铃的声音,是一种令人耳 ...

  5. 如何在MathType输入手写体a

    作为强大的数学公式编辑器,MathType中还能设置各种样式,还支持自定义设置,给大家编辑公式提供了更多的便利.那么有用户问:要如何将输入的字母a变为手写体呢?下面就来一起学习. 输入手写体a的步骤如 ...

  6. 前端(web)知识-html

    前端由三部分组成: HTML(标签)--CSS(美化,修饰)--JS(执行指令) HTML(超文本标记语言,Hypertext Markup Language):是一种用于创建网页的标记语言. 本质上 ...

  7. css3系列之过渡transition

    transition 设置变换属性的过渡效果,举个例子,也就是说, 如果从width100px 变成 width200px,要以什么方式进行变换,速度,时间,类型等. transition trans ...

  8. PHP 统计目录下文件数和文件大小

    1 /** 2 * 统计文件数和文件大小 3 */ 4 private function getFileCacheCount($pathName) 5 { 6 $data = [ 7 'num' =& ...

  9. 【Python】我是如何使计算时间提速25.6倍的

    我是如何使计算时间提速25.6倍的 我的原始文档:https://www.yuque.com/lart/blog/aemqfz 在显著性目标检测任务中有个重要的评价指标, E-measure, 需要使 ...

  10. Mysql命令、常用函数

    一.sql命令行 查看数据库 show database : 选择使用的数据库 use 数据库名  : 查看表 show tables ; 查询表 select * from 表名     高版本my ...