* [doc] Fix typo.
Project: http://git-wip-us.apache.org/repos/asf/incubator-weex/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-weex/commit/537ab002 Tree: http://git-wip-us.apache.org/repos/asf/incubator-weex/tree/537ab002 Diff: http://git-wip-us.apache.org/repos/asf/incubator-weex/diff/537ab002 Branch: refs/heads/master Commit: 537ab002aef27f14cc4de2dc790e86fd6b67c3e6 Parents: 515324f Author: Yun Dong <[email protected]> Authored: Wed Feb 22 11:23:32 2017 +0800 Committer: Yun Dong <[email protected]> Committed: Wed Feb 22 11:23:32 2017 +0800 ---------------------------------------------------------------------- doc/source/cn/references/modules/animation.md | 2 +- doc/source/cn/references/modules/websocket.md | 224 +++++++++++++++++++++ doc/source/references/components/cell.md | 2 - doc/source/references/components/div.md | 2 +- doc/source/references/components/image.md | 4 +- doc/source/references/components/indicator.md | 4 +- doc/source/references/components/input.md | 2 - doc/source/references/components/list.md | 2 - doc/source/references/components/refresh.md | 2 - doc/source/references/components/scroller.md | 4 - doc/source/references/components/slider.md | 10 +- doc/source/references/components/switch.md | 2 - doc/source/references/components/textarea.md | 2 - doc/source/references/components/video.md | 2 - doc/source/references/components/web.md | 4 +- doc/source/references/modules/globalevent.md | 2 +- doc/source/references/modules/websocket.md | 223 ++++++++++++++++++++ 17 files changed, 458 insertions(+), 35 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/cn/references/modules/animation.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/references/modules/animation.md b/doc/source/cn/references/modules/animation.md index 7de8d14..2ae020e 100644 --- a/doc/source/cn/references/modules/animation.md +++ b/doc/source/cn/references/modules/animation.md @@ -44,7 +44,7 @@ version: 2.1 | å称 | æè¿° | å¼ç±»å | é»è®¤å¼ | ç¤ºä¾ | | ---- | ---- | ---- | ---- | ---- | -| `translate`/`translateX`/`translateY` | æå®å ç´ å°å·²è¢«ç§»å¨å°çæ°ä½ç½® | åç´ å¼æç¾åæ¯ | æ | +| `translate`/`translateX`/`translateY` | æå®å ç´ ç§»å¨çå移é | åç´ å¼æç¾åæ¯ | æ | | `rotate` | æå®å ç´ å°è¢«æ转çè§åº¦ï¼åä½æ¯åº¦ | number | æ | | `scale`/`scaleX`/`scaleY` | ææ¯ä¾æ¾å¤§æ缩å°å ç´ | number | æ | http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/cn/references/modules/websocket.md ---------------------------------------------------------------------- diff --git a/doc/source/cn/references/modules/websocket.md b/doc/source/cn/references/modules/websocket.md new file mode 100644 index 0000000..4835e8e --- /dev/null +++ b/doc/source/cn/references/modules/websocket.md @@ -0,0 +1,224 @@ +--- +title: WebSocket +type: references +order: 3.11 +version: 2.1 +--- + +# WebSocket + +## Summary + +WebSockets æ¯ä¸ç§å è¿çææ¯, è¿ä½¿å¾å¨ç¨æ·ç H5/iOS/Android åä¸ä¸ªæå¡å¨ä¹é´æå¼ä¸ä¸ªç交äºå¼éä¿¡ä¼è¯æ为å¯è½, æäºè¿ä¸ª APIï¼ä½ å¯ä»¥åæå¡å¨åéæ¶æ¯, 并æ¥æ¶äºä»¶é©±å¨çååº, æ é轮询æå¡å¨çååº + +## **注æï¼** +- iOSåh5æä¾ WebSockets ç protocol é»è®¤å®ç°ï¼å®å使ç¨éè¦æä¾èªå®ä¹ adapter å®ç°ï¼source: + - [DefaultWebSocketAdapter.java](https://github.com/alibaba/weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java); + - [DefaultWebSocketAdapterFactory.java](https://github.com/alibaba/weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java); + - éæä¾ååèweex [playground](https://github.com/alibaba/weex/tree/dev/android/playground) + +- åªå¨.weæ件æ¯æï¼ä¸æ¯ævue2.0 + +## API +### `WebSocket(url, protocol)` + +å建 WebSocketsï¼å¹¶è¿æ¥æå¡å¨ + +#### Arguments + +- `url {string}`: 表示è¦è¿æ¥ç URL; +- `protocol {string}`: WebSockets åè®® + +### `send(data)` + +éè¿WebSocketè¿æ¥åæå¡å¨åéæ°æ® + +#### Arguments + +- `data{string}`:è¦åéå°æå¡å¨çæ°æ® + +### `close(code,reason)` + +å ³é WebSockets çé¾æ¥ + +#### Arguments + +- `code {number}`: å ³éè¿æ¥çç¶æå·. +- `reason {string}`: å ³éçåå + +### `onopen(options)` + +é¾æ¥æå¼ççå¬ + +#### Arguments + +- `options {object}`: ä¸ä¸ªç©ºç对象 + +### `onmessage(options)` + +æ¶æ¯äºä»¶ççå¬å¨ + +#### Arguments + +- `options {object}`: æå¡å¨è¿åçæ¶æ¯å¯¹è±¡ + - `data {string}`: çå¬å¨æ¥æ¶çå°çæ¶æ¯ + +### `onclose(options)` + +å ³éäºä»¶ççå¬å¨ + +#### Arguments + +- `options {object}`: çå¬å¨æ¥æ¶å°ç对象 + - `code {number}`: æå¡å¨è¿åå ³éçç¶æç + - `reason {string}`: æå¡å¨è¿åçå ³éåå + - `wasClean {boolen}`: æ¯å¦å®å ¨å ³é. + +### `onerror(options)` + +é误äºä»¶ççå¬å¨ + +#### Arguments + +- `options {object}`: é误信æ¯çäºä»¶ + - `data {string}`: çå¬å¨æ¥æ¶å°çä¿¡æ¯ + +### Example + +```html +<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="" + 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> + </div> + + <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 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: 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 = require('@weex-module/webSocket'); + module.exports = { + data: { + connectinfo: '', + sendinfo: '', + onopeninfo: '', + onmessage: '', + oncloseinfo: '', + onerrorinfo: '', + closeinfo: '', + txtInput:'', + navBarHeight: 88, + title: 'Navigator', + dir: 'examples', + baseURL: '', + }, + methods: { + connect:function() { + websocket.WebSocket('ws://115.29.193.48:8088',''); + var self = this; + websocket.onopen = function(e) + { + self.onopeninfo = JSON.stringify(e); + } + websocket.onmessage = function(e) + { + self.onmessage = e.data; + } + websocket.onerror = function(e) + { + self.onerrorinfo = e.data; + } + websocket.onclose = function(e) + { + 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(); + }, + } + }; +</script> +``` + +[Have a try](http://dotwe.org/weex/993f33173a712fecfb61c1c4b03bcb70) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/cell.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/cell.md b/doc/source/references/components/cell.md index 8820104..97fb7ed 100644 --- a/doc/source/references/components/cell.md +++ b/doc/source/references/components/cell.md @@ -17,8 +17,6 @@ This type of component supports all kinds of weex component as its child compone ### Attributes -**common attributes**: check out the [common attributes](../common-attrs.html). - **Notes:** you can't give `<cell>` a `flex` value. Width of `<cell>` is equal to the width of its parent component `<list>`, and you don't need to specify its height. ### Styles http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/div.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/div.md b/doc/source/references/components/div.md index 7bb0491..2531a31 100644 --- a/doc/source/references/components/div.md +++ b/doc/source/references/components/div.md @@ -19,7 +19,7 @@ This type of component supports all kinds of weex component as its child compone ### Attributes -There is no specific attribute for this component other than the [common attributes](../common-attrs.html). +There is no specific attribute for this component. ### Styles http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/image.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/image.md b/doc/source/references/components/image.md index c4fab98..6d8fd3f 100644 --- a/doc/source/references/components/image.md +++ b/doc/source/references/components/image.md @@ -25,14 +25,12 @@ This component supports no child components. - `resize`: <span class="api-version">v0.5+</span> <string> the 'ScaleType' of the component. The default value is ``stretch``, if this attribute is not specified. Possible values are ``cover``, ``contain``, each of which has the same meaning with w3c standard. - `placeholder`: <span class="api-version">v0.9+</span> <string> image to display while the network image src is loading. -Other attributes please check out the [common attributes](../common-attrs.html). - ### Styles - `width`: <length> the width of the component. This style should be specified. - `height`: <length> the height of the component. This style should be specifed. -**common styles**: check out the [common styles](../common-attrs.html) +**common styles**: check out the [common styles](../common-style.html) - support flexbox related styles - support box model related styles http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/indicator.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/indicator.md b/doc/source/references/components/indicator.md index d5c58d1..9093656 100644 --- a/doc/source/references/components/indicator.md +++ b/doc/source/references/components/indicator.md @@ -17,7 +17,7 @@ This component supports no child components. ### Attributes -There is no specific attribute for this component other than the [common attributes](../common-attrs.html). +There is no specific attribute for this component. ### Styles @@ -25,7 +25,7 @@ There is no specific attribute for this component other than the [common attribu - `item-selectedColor`: <colors> This style attribute sets the selected item color using either a named color or a color specified in the hexadecimal #RRGGBB format. - `item-size`: <length> The size of the indicator elements, which is an float attribute. -**common styles**: check out the [common styles](../common-attrs.html) +**common styles**: check out the [common styles](../common-style.html) - support flexbox related styles - support box model related styles http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/input.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/input.md b/doc/source/references/components/input.md index c7487aa..1033351 100644 --- a/doc/source/references/components/input.md +++ b/doc/source/references/components/input.md @@ -29,8 +29,6 @@ This component supports no child components. * `maxlength`: <span class="api-version">v0.7+</span> a number value to specify maxlength of input. -Other attributes please check out the [common attributes](../common-attrs.html). - ## Styles * placeholder-color: the color of placeholder. Default value is '#999999'. http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/list.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/list.md b/doc/source/references/components/list.md index e3870a3..07f50ec 100644 --- a/doc/source/references/components/list.md +++ b/doc/source/references/components/list.md @@ -77,8 +77,6 @@ Notes: The list now supports the following child components: cell, header, refre Please checkout [Scroller Component Attributes](./scroller.html) to have a look at the inherited attributes from direct parent. -Other attributes please check out the [common attributes](../common-attrs.html). - ### Styles common styles: check out [common styles for components](../common-style.html) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/refresh.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/refresh.md b/doc/source/references/components/refresh.md index 2cfc08d..521e07c 100644 --- a/doc/source/references/components/refresh.md +++ b/doc/source/references/components/refresh.md @@ -23,8 +23,6 @@ Any other components, like the text and img components, can be put inside the re * display has value of show or hide. -Other attributes please check out the [common attributes](../common-attrs.html). - ### Styles common styles: check out [common styles for components](../common-style.html) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/scroller.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/scroller.md b/doc/source/references/components/scroller.md index 2b23253..1de3721 100644 --- a/doc/source/references/components/scroller.md +++ b/doc/source/references/components/scroller.md @@ -31,10 +31,6 @@ And there are two special components that can only be used inside scroller compo * loadmoreretry : <number> default value 0ï¼whether to reset loadmore related UI when loadmore failed, will be deprecated in further release. -Please checkout [Scroller Component Attributes]() to have a look at the inherited attributes from direct parent. - -Other attributes please check out the [common attributes](../common-attrs.html). - ## Styles common styles: check out [common styles for components](../common-style.html) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/slider.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/slider.md b/doc/source/references/components/slider.md index c50c700..e826a2f 100644 --- a/doc/source/references/components/slider.md +++ b/doc/source/references/components/slider.md @@ -21,11 +21,9 @@ It supports all kinds of weex components as its slides, especially the `indicato - `interval`: <number> millisecond. This value determines time interval for each page displayed in slider. - `index`: <number> . This value determines the index of current shown slide. The default value is `0`. -Other attributes please check out the [common attributes](../references/common-attrs.html). - ## Styles -**common styles**: check out [common styles for components](../references/common-style.html) +**common styles**: check out [common styles for components](../common-style.html) - support flexbox related styles - support box model related styles @@ -36,10 +34,10 @@ Other attributes please check out the [common attributes](../references/common-a - `change`: triggerd when the slide's index is changed. The event object contains the attribute of `index`, which is the index number of the currently shown slide. -**common events**: check out the [common events](../references/common-event.html) +**common events**: check out the [common events](../common-event.html) -- support `click` event. Check out [common events](../references/common-event.html) -- support `appear` / `disappear` event. Check out [common events](../references/common-event.html) +- support `click` event. Check out [common events](../common-event.html) +- support `appear` / `disappear` event. Check out [common events](../common-event.html) ### Example http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/switch.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/switch.md b/doc/source/references/components/switch.md index 7a71264..8756441 100644 --- a/doc/source/references/components/switch.md +++ b/doc/source/references/components/switch.md @@ -21,8 +21,6 @@ There are no child components for the switch component. * checked <boolean> true|false, default value is false, indicating whether the button is on or not. * disabled <boolean> true|false, default value is false, indicating whether the button is enable or not. -Other attributes please check out the [common attributes](../common-attrs.html). - ## Styles Notes: There are several style properties that you mustn't use on this component. And here are all the invalid properties: http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/textarea.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/textarea.md b/doc/source/references/components/textarea.md index a15c149..827674c 100644 --- a/doc/source/references/components/textarea.md +++ b/doc/source/references/components/textarea.md @@ -27,8 +27,6 @@ This component supports no child components. - `autofocus`: <boolean> a boolean attribute lets you specify that a form control should have input focus when the page loads. - `rows:`<number> a number which can specify the height of textarea, default is `2`. -Other attributes please check out the [common attributes](../common-attrs.html). - ### Styles **Pseudo-class**<span class="api-version">v0.9.5+</span>: `textarea` component support the following pseudo-classes: http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/video.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/video.md b/doc/source/references/components/video.md index 04af1a4..9d13989 100644 --- a/doc/source/references/components/video.md +++ b/doc/source/references/components/video.md @@ -19,8 +19,6 @@ The video component can be used to embed video content in a weex page. * play-status: <boolean> play | pause. Use it to control video's play/pause status. Default value is pause. * auto-play: <boolean> true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false. -Other attributes please check out the [common attributes](../common-attrs.html). - ## Styles common styles: check out [common styles for components](../common-style.html) http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/components/web.md ---------------------------------------------------------------------- diff --git a/doc/source/references/components/web.md b/doc/source/references/components/web.md index d03406b..7d2aa39 100644 --- a/doc/source/references/components/web.md +++ b/doc/source/references/components/web.md @@ -18,8 +18,6 @@ This component supports no child components. **src**(string): this attribute specifies the page source to load. -Other attributes please check out the [common attributes](../common-attrs.html). - ## Styles **width**(float): the width of the component, default value is 0. This style must be specified. @@ -29,7 +27,7 @@ Other attributes please check out the [common attributes](../common-attrs.html) ### common styles -check out the [common styles](../common-attrs.html). +check out the [common styles](../common-style.html). support flexbox related styles support box model related styles http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/modules/globalevent.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/globalevent.md b/doc/source/references/modules/globalevent.md index e102ea6..66df3a2 100644 --- a/doc/source/references/modules/globalevent.md +++ b/doc/source/references/modules/globalevent.md @@ -44,7 +44,7 @@ document.dispatchEvent(evt) ```java Map<String,Object> params=new HashMap<>(); params.put("key","value"); -mWXSDKInstance.fireGlobalEventCallback("geolocation",params); +mWXSDKInstance.fireGlobalEventCallback("geolocation", params); ``` #### iOS http://git-wip-us.apache.org/repos/asf/incubator-weex/blob/537ab002/doc/source/references/modules/websocket.md ---------------------------------------------------------------------- diff --git a/doc/source/references/modules/websocket.md b/doc/source/references/modules/websocket.md new file mode 100644 index 0000000..7868903 --- /dev/null +++ b/doc/source/references/modules/websocket.md @@ -0,0 +1,223 @@ +--- +title: WebSocket +type: references +order: 3.11 +version: 2.1 +--- + +# WebSocket + +## Summary + +WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's H5/iOS/android and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply + +## **Notes:** +- iOS and h5 provide webSocket default handle. if you use webSocket in android environment . you should provide custom adapter implementation,source: + - [DefaultWebSocketAdapter.java](https://github.com/alibaba/weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapter.java); + - [DefaultWebSocketAdapterFactory.java](https://github.com/alibaba/weex/blob/dev/android/commons/src/main/java/com/alibaba/weex/commons/adapter/DefaultWebSocketAdapterFactory.java); + - refer: [weex playground](https://github.com/alibaba/weex/tree/dev/android/playground) +- only support in .we file,not support in vue2.0 + +## API +### `WebSocket(url, protocol)` + +create websocket + +#### Arguments + +- `url {string}`:The URL to which to connect; +- `protocol {string}`:the websocket protocol + +### `send(data)` + +Transmits data to the server over the WebSocket connection + +#### Arguments + +- `data {string}`:A text string to send to the server. + +### `close(code,reason)` + +Closes the WebSocket connection or connection attempt, if any. If the connection is already CLOSED, this method does nothing. + +#### Arguments + +- `code {number}`: the status code explaining why the connection is being closed. +- `reason {string}`:a string explaining why the connection is closing + +### `onopen(options)` + +An event listener to be called when the WebSocket connection's readyState changes to OPEN; this indicates that the connection is ready to send and receive data. + +#### Arguments + +- `options {object}`:an empty object + +### `onmessage(options)` + +An event listener to be called when a message is received from the server + +#### Arguments + +- `options {object}`:the server message options + - `data {string}`: The listener received message + +### `onclose(options)` + +An event listener to be called when the WebSocket connection's readyState changes to CLOSED + +#### Arguments + +- `options {object}`:the CloseEvent is sent to clients using WebSockets when the connection is closed + - `code {number}`: Returns an unsigned short containing the close code send by the server + - `reason {string}`: Returns a string indicating the reason the server closed the connection + - `wasClean {boolen}`: Returns a Boolean that Indicates whether or not the connection was cleanly closed. + +### `onerror(options)` + +An event listener to be called when an error occurs. + +#### Arguments + +- `options {object}`:the error event + - `data {string}`: The listener received error data + +### Example + +```html +<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="" + 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> + </div> + + <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 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: 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 = require('@weex-module/webSocket'); + module.exports = { + data: { + connectinfo: '', + sendinfo: '', + onopeninfo: '', + onmessage: '', + oncloseinfo: '', + onerrorinfo: '', + closeinfo: '', + txtInput:'', + navBarHeight: 88, + title: 'Navigator', + dir: 'examples', + baseURL: '', + }, + methods: { + connect:function() { + websocket.WebSocket('ws://115.29.193.48:8088',''); + var self = this; + websocket.onopen = function(e) + { + self.onopeninfo = JSON.stringify(e); + } + websocket.onmessage = function(e) + { + self.onmessage = e.data; + } + websocket.onerror = function(e) + { + self.onerrorinfo = e.data; + } + websocket.onclose = function(e) + { + 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(); + }, + } + }; +</script> +``` + +[Have a try](http://dotwe.org/weex/993f33173a712fecfb61c1c4b03bcb70)
