You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by da...@apache.org on 2017/06/26 09:13:52 UTC
[2/9] incubator-weex git commit: + [html5] add example for webSocket
+ [html5] add example for webSocket
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo
Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/d0a5e4d1
Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/d0a5e4d1
Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/d0a5e4d1
Branch: refs/heads/0.14-dev
Commit: d0a5e4d1f8195623e021b25dd8f19163b6320c2f
Parents: 9df3655
Author: erha19 <75...@qq.com>
Authored: Thu Jun 22 14:52:21 2017 +0800
Committer: erha19 <75...@qq.com>
Committed: Thu Jun 22 14:52:21 2017 +0800
----------------------------------------------------------------------
examples/vue/index.vue | 1 +
examples/vue/modules/websocket.vue | 116 ++++++++++++++++++++++++++++++++
2 files changed, 117 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/d0a5e4d1/examples/vue/index.vue
----------------------------------------------------------------------
diff --git a/examples/vue/index.vue b/examples/vue/index.vue
index 69d867d..ebea3ad 100644
--- a/examples/vue/index.vue
+++ b/examples/vue/index.vue
@@ -34,6 +34,7 @@
// module
{name: root + '/modules/instance-api', title: 'Instance API'},
{name: root + '/modules/modal', title: 'Modal'},
+ {name: root + '/modules/webSocket', title: 'WebSocket'},
{name: root + '/modules/stream', title: 'Stream'},
{name: root + '/modules/storage',title:'Storage'},
// {name: 'module/clipboard', title: 'Clipboard'}, // 0.8 , developing
http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/d0a5e4d1/examples/vue/modules/websocket.vue
----------------------------------------------------------------------
diff --git a/examples/vue/modules/websocket.vue b/examples/vue/modules/websocket.vue
new file mode 100644
index 0000000..72d7ea1
--- /dev/null
+++ b/examples/vue/modules/websocket.vue
@@ -0,0 +1,116 @@
+<template>
+ <scroller>
+ <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" class="input" autofocus="false" value="" @input="oninput" ref="input" />
+ <div style="flex-direction: row; justify-content: center;">
+ <text class="button" @click="connect">connect</text>
+ <text class="button" @click="send">send</text>
+ <text class="button" @click="close">close</text>
+ </div>
+ <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 style="background-color: lightgray">
+ <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>
+ <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>
+ </scroller>
+</template>
+
+<style scoped>
+ .input {
+ font-size: 40px;
+ height: 80px;
+ width: 600px;
+ }
+
+ .button {
+ font-size: 36px;
+ width: 150px;
+ color: #41B883;
+ text-align: center;
+ padding-top: 25px;
+ padding-bottom: 25px;
+ 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>
+ var websocket = weex.requireModule('webSocket')
+ export default {
+ data() {
+ return {
+ connectinfo: '',
+ sendinfo: '',
+ onopeninfo: '',
+ onmessage: '',
+ oncloseinfo: '',
+ onerrorinfo: '',
+ closeinfo: '',
+ txtInput: '',
+ navBarHeight: 88,
+ title: 'Navigator',
+ dir: 'examples',
+ baseURL: ''
+ }
+ },
+ 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.oncloseinfo = e.code;
+ }
+ },
+ send: function(e) {
+ var input = this.$refs.input;
+ input.blur();
+ websocket.send(this.txtInput);
+ this.sendinfo = this.txtInput;
+ },
+ oninput: function(event) {
+ this.txtInput = event.value;
+ },
+ close: function(e) {
+ this.closeinfo = 'close connect';
+ websocket.close();
+ },
+ },
+ }
+</script>
\ No newline at end of file