| <template> |
| <scroller> |
| <div> |
| <div style="background-color: #286090"> |
| <text class="title" style="height: 80 ;padding: 20;color: #FFFFFF">websocket</text> |
| </div> |
| <input |
| type="text" |
| placeholder="please input message to send" |
| class="input" |
| autofocus="false" |
| value="" |
| onchange="onchange" |
| oninput="oninput" |
| id = "input" |
| /> |
| <div style="flex-direction: row; justify-content: center;"> |
| <text class="button" onclick="{{connect}}">connect</text> |
| <text class="button" onclick="{{send}}">send</text> |
| <text class="button" onclick="{{close}}">close</text> |
| <text class="button" onclick="{{go}}">chatroom</text> |
| </div> |
| <div style="background-color: #D3D3D3;margin-top: 20"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = send</text> |
| </div> |
| <text style="color: #000000;height: 80">{{sendinfo}}</text> |
| <div style="background-color: #D3D3D3"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onopen</text> |
| </div> |
| <text style="color: #000000;height: 80">{{onopeninfo}}</text> |
| <div style="background-color: #D3D3D3"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onmessage</text> |
| </div> |
| <text style="color: #000000;height: 100">{{onmessage}}</text> |
| <div style="background-color: #D3D3D3"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onclose</text> |
| </div> |
| <text style="color: #000000;height: 80">{{oncloseinfo}}</text> |
| <div style="background-color: #D3D3D3"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = onerror</text> |
| </div> |
| <text style="color: #000000;height: 80">{{onerrorinfo}}</text> |
| <div style="background-color: #D3D3D3"> |
| <text class="title" style="height: 80 ;padding: 20;color: #000000">method = close</text> |
| </div> |
| <text style="color: #000000;height: 80">{{closeinfo}}</text> |
| </div> |
| </div> |
| </scroller> |
| </template> |
| <style> |
| .input { |
| font-size: 40; |
| height: 80; |
| width: 600; |
| } |
| .button { |
| font-size: 30; |
| width: 150; |
| color: #41B883; |
| text-align: center; |
| padding-top: 10; |
| padding-bottom: 10; |
| border-width: 2; |
| border-style: solid; |
| margin-right: 20; |
| border-color: rgb(162, 217, 192); |
| background-color: rgba(162, 217, 192, 0.2); |
| } |
| </style> |
| <script> |
| var websocket = require('@weex-module/webSocket'); |
| var navigator = require('@weex-module/navigator'); |
| module.exports = { |
| data: { |
| connectinfo: '', |
| sendinfo: '', |
| onopeninfo: '', |
| onmessage: '', |
| oncloseinfo: '', |
| onerrorinfo: '', |
| closeinfo: '', |
| txtInput:'', |
| navBarHeight: 88, |
| title: 'Navigator', |
| dir: 'examples', |
| baseURL: '', |
| }, |
| created: function() { |
| var bundleUrl = this.$getConfig().bundleUrl; |
| bundleUrl = new String(bundleUrl); |
| console.log('hit', bundleUrl); |
| var nativeBase; |
| var isAndroidAssets = bundleUrl.indexOf('file://assets/') >= 0; |
| |
| var isiOSAssets = bundleUrl.indexOf('file:///') >= 0 && bundleUrl.indexOf('WeexDemo.app') > 0; |
| if (isAndroidAssets) { |
| nativeBase = 'file://assets/'; |
| } |
| else if (isiOSAssets) { |
| // file:///var/mobile/Containers/Bundle/Application/{id}/WeexDemo.app/ |
| // file:///Users/{user}/Library/Developer/CoreSimulator/Devices/{id}/data/Containers/Bundle/Application/{id}/WeexDemo.app/ |
| nativeBase = bundleUrl.substring(0, bundleUrl.lastIndexOf('/') + 1); |
| } |
| else { |
| var host = 'localhost:12580'; |
| var matches = /\/\/([^\/]+?)\//.exec(this.$getConfig().bundleUrl); |
| if (matches && matches.length >= 2) { |
| host = matches[1]; |
| } |
| nativeBase = 'http://' + host + '/' + this.dir + '/build/'; |
| } |
| var h5Base = bundleUrl; |
| // in Native |
| var base = nativeBase; |
| if (typeof window == 'object') { |
| // in Browser or WebView |
| base = h5Base; |
| } |
| this.baseURL = base; |
| }, |
| methods: { |
| |
| connect:function() { |
| websocket.WebSocket('ws://echo.websocket.org',''); |
| var self = this; |
| self.onopeninfo = 'connecting...' |
| websocket.onopen = function(e) |
| { |
| self.onopeninfo = 'websocket open'; |
| } |
| websocket.onmessage = function(e) |
| { |
| self.onmessage = e.data; |
| } |
| websocket.onerror = function(e) |
| { |
| self.onerrorinfo = e.data; |
| } |
| websocket.onclose = function(e) |
| { |
| self.onopeninfo = ''; |
| self.onerrorinfo = e.code; |
| } |
| }, |
| send:function(e) { |
| var input = this.$el('input'); |
| input.blur(); |
| websocket.send(this.txtInput); |
| this.sendinfo = this.txtInput; |
| }, |
| oninput: function(event) { |
| this.txtInput = event.value; |
| }, |
| close:function(e) { |
| websocket.close(); |
| }, |
| go:function(e) { |
| var vm = this; |
| if (typeof window !== 'object') { |
| this.baseURL = this.baseURL + 'module/chatroom-demo.js?test=1'; |
| } |
| var params = { |
| 'url': this.baseURL, |
| 'animated' : 'true', |
| } |
| navigator.push(params,function(){ |
| }); |
| }, |
| } |
| }; |
| </script> |