You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by ji...@apache.org on 2017/02/24 16:48:25 UTC
[37/50] incubator-weex git commit: * [doc] Fix typo.
* [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/test-ci
Commit: 537ab002aef27f14cc4de2dc790e86fd6b67c3e6
Parents: 515324f
Author: Yun Dong <yu...@gmail.com>
Authored: Wed Feb 22 11:23:32 2017 +0800
Committer: Yun Dong <yu...@gmail.com>
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
| \u540d\u79f0 | \u63cf\u8ff0 | \u503c\u7c7b\u578b | \u9ed8\u8ba4\u503c | \u793a\u4f8b |
| ---- | ---- | ---- | ---- | ---- |
-| `translate`/`translateX`/`translateY` | \u6307\u5b9a\u5143\u7d20\u5c06\u5df2\u88ab\u79fb\u52a8\u5230\u7684\u65b0\u4f4d\u7f6e | \u50cf\u7d20\u503c\u6216\u767e\u5206\u6bd4 | \u65e0 |
+| `translate`/`translateX`/`translateY` | \u6307\u5b9a\u5143\u7d20\u79fb\u52a8\u7684\u504f\u79fb\u91cf | \u50cf\u7d20\u503c\u6216\u767e\u5206\u6bd4 | \u65e0 |
| `rotate` | \u6307\u5b9a\u5143\u7d20\u5c06\u88ab\u65cb\u8f6c\u7684\u89d2\u5ea6\uff0c\u5355\u4f4d\u662f\u5ea6 | number | \u65e0 |
| `scale`/`scaleX`/`scaleY` | \u6309\u6bd4\u4f8b\u653e\u5927\u6216\u7f29\u5c0f\u5143\u7d20 | number | \u65e0 |
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 \u662f\u4e00\u79cd\u5148\u8fdb\u7684\u6280\u672f, \u8fd9\u4f7f\u5f97\u5728\u7528\u6237\u7684 H5/iOS/Android \u548c\u4e00\u4e2a\u670d\u52a1\u5668\u4e4b\u95f4\u6253\u5f00\u4e00\u4e2a\u7684\u4ea4\u4e92\u5f0f\u901a\u4fe1\u4f1a\u8bdd\u6210\u4e3a\u53ef\u80fd, \u6709\u4e86\u8fd9\u4e2a API\uff0c\u4f60\u53ef\u4ee5\u5411\u670d\u52a1\u5668\u53d1\u9001\u6d88\u606f, \u5e76\u63a5\u6536\u4e8b\u4ef6\u9a71\u52a8\u7684\u54cd\u5e94, \u65e0\u9700\u8f6e\u8be2\u670d\u52a1\u5668\u7684\u54cd\u5e94
+
+## **\u6ce8\u610f\uff1a**
+- iOS\u548ch5\u63d0\u4f9b WebSockets \u7684 protocol \u9ed8\u8ba4\u5b9e\u73b0\uff0c\u5b89\u5353\u4f7f\u7528\u9700\u8981\u63d0\u4f9b\u81ea\u5b9a\u4e49 adapter \u5b9e\u73b0\uff0csource:
+ - [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);
+ - \u96c6\u6210\u4f8b\u5b50\u53c2\u8003weex [playground](https://github.com/alibaba/weex/tree/dev/android/playground)
+
+- \u53ea\u5728.we\u6587\u4ef6\u652f\u6301\uff0c\u4e0d\u652f\u6301vue2.0
+
+## API
+### `WebSocket(url, protocol)`
+
+\u521b\u5efa WebSockets\uff0c\u5e76\u8fde\u63a5\u670d\u52a1\u5668
+
+#### Arguments
+
+- `url {string}`: \u8868\u793a\u8981\u8fde\u63a5\u7684 URL;
+- `protocol {string}`: WebSockets \u534f\u8bae
+
+### `send(data)`
+
+\u901a\u8fc7WebSocket\u8fde\u63a5\u5411\u670d\u52a1\u5668\u53d1\u9001\u6570\u636e
+
+#### Arguments
+
+- `data{string}`:\u8981\u53d1\u9001\u5230\u670d\u52a1\u5668\u7684\u6570\u636e
+
+### `close(code,reason)`
+
+\u5173\u95ed WebSockets \u7684\u94fe\u63a5
+
+#### Arguments
+
+- `code {number}`: \u5173\u95ed\u8fde\u63a5\u7684\u72b6\u6001\u53f7.
+- `reason {string}`: \u5173\u95ed\u7684\u539f\u56e0
+
+### `onopen(options)`
+
+\u94fe\u63a5\u6253\u5f00\u7684\u76d1\u542c
+
+#### Arguments
+
+- `options {object}`: \u4e00\u4e2a\u7a7a\u7684\u5bf9\u8c61
+
+### `onmessage(options)`
+
+\u6d88\u606f\u4e8b\u4ef6\u7684\u76d1\u542c\u5668
+
+#### Arguments
+
+- `options {object}`: \u670d\u52a1\u5668\u8fd4\u56de\u7684\u6d88\u606f\u5bf9\u8c61
+ - `data {string}`: \u76d1\u542c\u5668\u63a5\u6536\u7684\u5230\u7684\u6d88\u606f
+
+### `onclose(options)`
+
+\u5173\u95ed\u4e8b\u4ef6\u7684\u76d1\u542c\u5668
+
+#### Arguments
+
+- `options {object}`: \u76d1\u542c\u5668\u63a5\u6536\u5230\u7684\u5bf9\u8c61
+ - `code {number}`: \u670d\u52a1\u5668\u8fd4\u56de\u5173\u95ed\u7684\u72b6\u6001\u7801
+ - `reason {string}`: \u670d\u52a1\u5668\u8fd4\u56de\u7684\u5173\u95ed\u539f\u56e0
+ - `wasClean {boolen}`: \u662f\u5426\u5b8c\u5168\u5173\u95ed.
+
+### `onerror(options)`
+
+\u9519\u8bef\u4e8b\u4ef6\u7684\u76d1\u542c\u5668
+
+#### Arguments
+
+- `options {object}`: \u9519\u8bef\u4fe1\u606f\u7684\u4e8b\u4ef6
+ - `data {string}`: \u76d1\u542c\u5668\u63a5\u6536\u5230\u7684\u4fe1\u606f
+
+### 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\uff0cwhether 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)