apicloud apicloud

注册
查看: 3667|回复: 12

[模块教程] mywebsocket 模块demo

主题:
3
帖子:
34
云币:
37

[模块教程] mywebsocket 模块demo

3667 12 | 发表于 2019-7-25 15:51:46 |阅读模式 | |
本帖最后由 music coder 于 2019-7-25 15:54 编辑

文档地址
https://docs.apicloud.com/Client-API/Func-Ext/myWebSocket


github  完整demo 地址
https://github.com/jay100/myWebSocket-widget


以下部分代码,仅供参考


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Module Develop</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport"
  7.           content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  8.     <style type="text/css">
  9.         html, body {
  10.             height: 100%
  11.         }

  12.         body {
  13.             background-color: #fff;
  14.             margin: 0;
  15.         }

  16.         #wrap {
  17.             height: 100%;
  18.             position: relative;
  19.         }

  20.         #header {
  21.             background-color: #5082c2;
  22.             height: 44px;
  23.             position: relative;
  24.         }

  25.         #header h1 {
  26.             font-size: 20px;
  27.             height: 44px;
  28.             line-height: 44px;
  29.             margin: 0em;
  30.             color: #fff;
  31.             margin-left: 100px;
  32.             margin-right: 100px;
  33.             text-align: center;
  34.         }

  35.         #main {
  36.             display: block;
  37.         }

  38.         a.button {
  39.             display: -webkit-box;
  40.             -webkit-box-pack: center;
  41.             -webkit-box-align: center;
  42.             height: 36px;
  43.             margin: 8px;
  44.             background-color: rgba(240, 240, 240, 1.0);
  45.             border-color: rgba(220, 220, 220, 1.0);
  46.             border-width: 2px;
  47.             border-style: solid;
  48.         }

  49.         a.active {
  50.             background-color: rgba(240, 240, 240, 0.6);
  51.         }

  52.         .input {
  53.             width: 100%;
  54.         }

  55.     </style>
  56.     <link rel="stylesheet" type="text/css" href="css/aui.2.0.css"/>
  57. </head>
  58. <body>
  59. <div id="wrap">
  60.     <div id="main">
  61.         <div style="margin:8px ">
  62.             <input placeholder="websocket url" id="url" class="input"
  63.                    value="wss://t-api.ezhiduo.cn:8282?auth_key=qEfQAyuW-1558594124-d5b282f511733db0e50b93d0f1dab1c0&module_test=1"/>
  64.             <label for="autoReconnect"><input id="autoReconnect" type="checkbox" onchange="setAutoReconnect(this)"  />开启自动重连</label>
  65.             <button class="button" tapmode="active" onclick="openSocket()" id="openSocket">连接2</button>
  66.         </div>
  67.         <div style="padding:8px ">
  68.             <div>开启自动重连后,网络变化、后台进入前台</div>
  69.             <div>将自动判断进行重连</div>
  70.         </div>
  71.         <div style="padding:8px ">
  72.             <input placeholder="websocket url" id="msg" class="input" style="width: 70%" value="test msg"></input>
  73.             <button  tapmode="active" onclick="sendSocket()" id="sendSocket">发送消息</button>
  74.         </div>
  75.         <div style="padding:8px ">
  76.             <button tapmode="active" onclick="alert(webSocket.readyState())" >readyState</button>
  77.             <button tapmode="active" onclick="closeSocket()" id="closeSocket">关闭</button>
  78.         </div>
  79.     </div>

  80.     消息状态:
  81.     <button onclick="document.getElementById('TestDiv').innerHTML='';content='';">清除</button>
  82.     <div id="TestDiv">
  83.     </div>

  84. </div>
  85. <script>

  86.     var isAutoReconnect = false;
  87.     var webSocket = null;
  88.     var content = "";


  89.     function setAutoReconnect(obj){
  90.         isAutoReconnect = obj.checked
  91.     }
  92.     function toast(msg) {
  93.         api.toast({msg: msg});
  94.     }






  95.     function openSocket() {

  96.         var url = document.getElementById('url').value;
  97.         document.getElementById('openSocket').setAttribute('disabled', true);
  98.         webSocket.open({url: url, pingInterval: 30, pingData: "ping",autoReconnect:isAutoReconnect}, function (ret, err) {
  99.             if (err) {
  100.                 toast(err.data);
  101.             } else {
  102.                 toast(ret.data)
  103.             }
  104.         });


  105.     }

  106.     function sendSocket() {
  107.         if (!webSocket) {
  108.             toast('请先连接');
  109.             return;
  110.         }
  111.         var msg = document.getElementById('msg').value;
  112.         var data = {
  113.             type:'test-msg',
  114.             message:msg
  115.         }
  116.         var r = webSocket.send({msg: JSON.stringify(data)});
  117.         if (r != 'success') toast('发送失败');
  118.         else toast('发送成功');

  119.     }

  120.     function closeSocket() {

  121.         webSocket.close(function (ret, err) {
  122.             if(ret)
  123.             toast(ret.data);
  124.             else toast(err.data)
  125.             document.getElementById('openSocket').removeAttribute('disabled');
  126.         });


  127.     }

  128.     function apiready() {

  129.         // 导入模块
  130.         webSocket = api.require('myWebSocket');

  131.         //注意只可以绑定一次哦,后面添加的会覆盖哦。
  132.         webSocket.bindEvent(function (ret, err) {
  133.             var type = ret.type;
  134.             var data = ret.data;

  135.             switch (type) {
  136.                 case 'opened':
  137.                     document.getElementById('openSocket').setAttribute('disabled', true);
  138.                     break;
  139.                 case 'receive':
  140.                     break;
  141.                 case 'error':
  142.                     document.getElementById('openSocket').removeAttribute('disabled');
  143.                     break;
  144.                 case 'closed':
  145.                     document.getElementById('openSocket').removeAttribute('disabled');
  146.                     break;
  147.             }

  148.             content += "type:" + type + ",data:" + data  + new Date().toLocaleTimeString()+ "</br>";
  149.             document.getElementById("TestDiv").innerHTML = content;
  150.         })

  151.     }

  152. </script>
  153. </body>

  154. </html>

复制代码


主题:
36
帖子:
1240
云币:
16979

我李白贼6

发表于 2020-8-16 21:11:59 |
什么鬼额,用这个模块发提示信息发送成功 ,但是服务端没收到,对方也没收到  !!!!!,前几个月适用这个模块就有点问题,今天再来用就用不起了什么鬼!!  js websocket 主要断开 各种小毛病   没想到这个模块直接没法用

主题:
87
帖子:
4953
云币:
1787

足球狗

发表于 2019-7-31 21:47:22 |
不错不错。

转正司机

UID:736459

主题:
44
帖子:
775
云币:
11343
发表于 2019-9-30 18:10:36 |
提示 connected is not defined

转正司机

UID:736459

主题:
44
帖子:
775
云币:
11343
发表于 2019-9-30 18:10:57 |
有大佬知道是为啥么

版主

UID:83211

主题:
169
帖子:
9259
云币:
2014

APICloud粉丝模块开发者一周年你吃屎!女朋友SB侠APICloud大会专属勋章捣蛋鬼

发表于 2019-9-30 19:03:41 来自手机 |
模块没加载成功?

驾校小白

UID:602552

主题:
1
帖子:
24
云币:
3
发表于 2020-3-18 11:45:12 |
这个模块跳转页面是不是就下线了,然后再进来在上线?

驾校小白

UID:602552

主题:
1
帖子:
24
云币:
3
发表于 2020-3-24 17:24:59 |
断线重连怎么弄?现在突然掉线了,怎么触发重连,设置了断线重连,后台需要返回什么来触发重新连接

主题:
0
帖子:
6
云币:
8
发表于 2020-3-28 21:17:07 |
这个和单列模式的win里面直接使用js的websocket有什么区别?
目前自己用js实现了一个,断线重连 多事件注册等都没问题,目前看来还是蛮好用的

驾校小白

UID:467634

主题:
12
帖子:
55
云币:
49
发表于 2020-5-11 10:16:28 |
IOS 心跳数据, 填写什么后台接收到的都是 0
12下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表