* [ios] bug fix: change websocket demo server

lltemplar · Feb 24, 2017 · 2ef5840 · 2ef5840
1 parent 5529bb1
commit 2ef5840
Showing 1 changed file with 50 additions and 38 deletions.
diff --git a/examples/module/websocket-demo.we b/examples/module/websocket-demo.we
@@ -1,6 +1,9 @@
 <template>
     <scroller>
-        <wxc-panel title="websocket" type="primary">
+        <div>
+            <div style="background-color: #286090">
+                <text class="title" style="height: 80px ;padding: 20px;color: white">websocket</text>
+            </div>
             <input
                     type="text"
                     placeholder="please input message to send"
@@ -12,51 +15,59 @@
                     id = "input"
             />
             <div style="flex-direction: row; justify-content: center;">
-                <wxc-button value="connect" size="small"  type="primary" onclick="{{connect}}"></wxc-button>
-                <wxc-button value="send" size="small" onclick="{{send}}" type="primary" style="margin-left:20px;"></wxc-button>
-                <wxc-button value="close" size="small" onclick="{{close}}" type="primary" style="margin-left:20px;"></wxc-button>
-
+                <text class="button" onclick="{{connect}}">connect</text>
+                <text class="button" onclick="{{send}}">send</text>
+                <text class="button" onclick="{{close}}">close</text>
+            </div>
+            <div style="background-color: lightgray;margin-top: 20px">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = send</text>
+            </div>
+            <text style="color: black;height: 80px">{{sendinfo}}</text>
+            <div style="background-color: lightgray">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = onopen</text>
+            </div>
+            <text style="color: black;height: 80px">{{onopeninfo}}</text>
+            <div style="background-color: lightgray">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = onmessage</text>
             </div>
-
-            <wxc-panel title="method = send">
-                <text>{{sendinfo}}</text>
-            </wxc-panel>
-
-            <wxc-panel title="method = onopen">
-                <text>{{onopeninfo}}</text>
-            </wxc-panel>
-
-            <wxc-panel title="method = onmessage">
-                <text>{{onmessage}}</text>
-            </wxc-panel>
-
-            <wxc-panel title="method = onclose">
-                <text>{{oncloseinfo}}</text>
-            </wxc-panel>
-
-            <wxc-panel title="method = onerror">
-                <text>{{onerrorinfo}}</text>
-            </wxc-panel>
-
-            <wxc-panel title="method = close">
-                <text>{{closeinfo}}</text>
-            </wxc-panel>
-        </wxc-panel>
+            <text style="color: black;height: 400px">{{onmessage}}</text>
+            <div style="background-color: lightgray">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = onclose</text>
+            </div>
+            <text style="color: black;height: 80px">{{oncloseinfo}}</text>
+            <div style="background-color: lightgray">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = onerror</text>
+            </div>
+            <text style="color: black;height: 80px">{{onerrorinfo}}</text>
+            <div style="background-color: lightgray">
+                <text class="title" style="height: 80px ;padding: 20px;color: black">method = close</text>
+            </div>
+            <text style="color: black;height: 80px">{{closeinfo}}</text>
+        </div>
+        </div>
     </scroller>
 </template>
-
 <style>
     .input {
         font-size: 40px;
         height: 80px;
         width: 600px;
     }
+    .button {
+        font-size: 36px;
+        width: 150px;
+        color: #41B883;
+        text-align: center;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        border-width: 2px;
+        border-style: solid;
+        margin-right: 20px;
+        border-color: rgb(162, 217, 192);
+        background-color: rgba(162, 217, 192, 0.2);
+    }
 </style>
-
 <script>
-    require('weex-components');
-    var navigator = require('@weex-module/navigator');
-    var modal = require('@weex-module/modal');
     var websocket = require('@weex-module/webSocket');
     module.exports = {
         data: {
@@ -75,11 +86,12 @@
         },
         methods: {
             connect:function() {
-                websocket.WebSocket('ws://115.29.193.48:8088','');
+                websocket.WebSocket('ws://echo.websocket.org');
                 var self = this;
+                self.onopeninfo = 'connecting...'
                 websocket.onopen = function(e)
                 {
-                    self.onopeninfo = e;
+                    self.onopeninfo = 'websocket open';
                 }
                 websocket.onmessage = function(e)
                 {
@@ -91,6 +103,7 @@
                 }
                 websocket.onclose = function(e)
                 {
+                    self.onopeninfo = '';
                     self.onerrorinfo = e.code;
                 }
             },
@@ -99,7 +112,6 @@
                 input.blur();
                 websocket.send(this.txtInput);
                 this.sendinfo = this.txtInput;
-
             },
             oninput: function(event) {
                 this.txtInput = event.value;