websocket

接口声明

在manifest.json文件的 features属性中增加如下配置。

{"name": "system.websocketfactory"}

导入模块

在调用接口页面的<script>部分增加如下配置。

import websocketfactory from '@system.websocketfactory'

或

var websocketfactory = require("@system.websocketfactory")

使用限制

接口定义

[h2]websocketfactory.create(OBJECT)

描述

创建一个WebSocket连接，每次成功调用websocketfactory.create将返回一个新的websocket对象。

从1060版本开始，可以通过 manifest.json 的 config.network 进行网络超时的配置。

创建Websocket的个数不受限制。

OBJECT参数

示例代码

var websocket = websocketfactory.create({
    url: 'ws://echo.websocket.org',
    header:{
        'content-type': 'application/json'
    },
    protocols: ['protocol1']
})

[h2]websocket.send(OBJECT)

描述

使用create创建的对象websocket发送消息。

OBJECT参数

示例代码

websocket.send({
    data:'send message',
    success:function() {
        console.log('success');
    },
    fail:function() {
        console.log('failed');
    }
}) 
sendMessage: function () {
    var that = this;
    var buffer = new ArrayBuffer(4);
    var a = new Uint8Array(buffer);
    a[0] = 1;
    a[1] = 2;
    a[2] = 3;
    a[3] = 4;
    if (that.websocket) {
        that.websocket.send({
            data: buffer,
            success: function () {
                console.log('success');
                that.isSend = "发送成功";
            },
            fail: function () {
                console.log('failed');
                that.isSend = "发送失败";
            }
        })
    }
},

[h2]websocket.close(OBJECT)

描述

关闭websocket连接。

OBJECT参数

示例代码

websocket.close({
    code: 1000,
    reason: 'close as normal',
    success: function() {
        console.log('close success');
    },
    fail: function() {
        console.log('close fail');
    }
})

[h2]websocket.onopen(OBJECT)

描述

监听websocket连接打开的状态。

OBJECT参数

示例代码

websocket.onopen = function() {
    console.log('connect open');
}

[h2]websocket.onmessage(OBJECT)

描述

消息事件的监听，用于接收服务端发来的message。

OBJECT参数

callback返回参数：

示例代码

websocket.onmessage = function (e) {
    console.log("onmessage e = "+e.data);
}
websocket.onmessage = function (e) {
    console.log("onmessage e = "+JSON.stringify(String.fromCharCode.apply(null, new Uint8Array(e.data))));
}

[h2]websocket.onclose(OBJECT)

描述

关闭连接的监听。

OBJECT参数

callback返回参数：

code说明：

示例代码

websocket.onclose = function(e) {
    console.log("onclose e.code = "+e.code+", e.reason = "+e.reason+", wasClean = "+e.wasClean);
}

[h2]websocket.onerror(OBJECT)

描述

错误事件的监听器。

OBJECT参数

callback返回参数：

示例代码

websocket.onerror = function(e) {
    console.log("onerror e.data = "+e.data);
}

安全要求

对于HTTPS请求，对证书要求如下：

• HTTPS证书必须有效。证书必须被系统信任，不支持自签名证书，部署SSL证书的网站域名必须与证书颁发的域名一致，证书必须在有效期内。
• 从1200版本开始，TLS必须支持1.2及以上版本，请确保HTTPS服务器的TLS版本能够同时支持TLS1.2及以下版本。

  从安全性考虑，建议也支持TLS1.3。1200及以上版本在配置加密套件时排除不安全算法：TEA/DES/DESX/DES40/RC2/RC4/RIPEMD/NULL/SHA0/MD2/MD4/MD5/ANON/TLS_EMPTY_RENEGOTIATION_INFO_SCSV；1200以下版本在配置加密套件时排除不安全算法：TEA/DES/DESX/DES40/RC2/RC4/RIPEMD/eNULL/aNULL/NULL/SHA0/MD2/MD4/MD5/ANON/TLS_EMPTY_RENEGOTIATION_INFO_SCSV。部分CA可能不被操作系统信任，请开发者在选择证书时注意操作系统的相关通告。

Demo

<template>
    <div>
        <div>
            <text>{{componentName}}</text>
        </div>
        <div>
            <text>连接指定url：{{isSuccess}}</text>
        </div>
        <input type="button" onclick="connectWebsocket" value="连接指定url" />
        <div>
            <text>连接指定url2：{{isSuccess2}}</text>
        </div>
        <input type="button" onclick="connectWebsocket2" value="连接指定url2" />
        <div>
            <text>连接指定url3：{{isSuccess3}}</text>
        </div>
        <input type="button" onclick="connectWebsocket3" value="连接指定url3" />
        <div>
            <text>发送信息：{{isSend}}</text>
        </div>
        <input type="button" onclick="sendMessage" value="发送消息" />
        <input type="button" onclick="closeWebsocket" value="关闭" />
        <div>
            <text>发送信息：{{isSend2}}</text>
        </div>
        <input type="button" onclick="sendMessage2" value="发送消息2" />
        <input type="button" onclick="closeWebsocket2" value="关闭2" />
        <div>
            <text>发送信息：{{isSend3}}</text>
        </div>
        <input type="button" onclick="sendMessage3" value="发送消息3" />
        <input type="button" onclick="closeWebsocket3" value="关闭3" />
    </div>
</template>
<style>
    @import '../Common/css/common.css';
    .item-container {
        margin-bottom: 50px;
        margin-right: 60px;
        margin-left: 60px;
        flex-direction: column;
    }
    .item-content {
        flex-direction: column;
        background-color: #ffffff;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 30px;
        align-items: flex-start;
    }
    .txt {
        padding-top: 15px;
        padding-bottom: 15px;
    }
</style>
<script>
    import websocketfactory from '@system.websocketfactory'
    export default {
        data: {
            componentName: 'Websocket',
            isSuccess: '',
            isSend: '',
            isSend2: '',
            isSend3: '',
            websocket: '',
            isSuccess2: '',
            isSuccess3: '',
            websocket2: '',
        },
        onInit: function () {
            this.$page.setTitleBar({ text: 'Websocket' })
        },
        connectWebsocket: function () {
            var that = this;
            that.websocket = websocketfactory.create({
                url: 'ws://echo.websocket.org'
            })
            that.websocket.onmessage = function (e) {
                console.log("onmessage e = " + e.data);
            }
            that.websocket.onclose = function (e) {
                console.log("onclose e.code = " + e.code + ", e.reason = " + e.reason + ", wasClean = " + e.wasClean);
            }
            that.websocket.onerror = function (e) {
                console.log("onerror e.data = " + e.data);
                that.isSuccess = "连接失败";
            }
            that.websocket.onopen = function () {
                console.log('connect open');
                that.isSuccess = "连接成功"
            }
        },
        sendMessage: function () {
            var that = this;
            if (that.websocket) {
                that.websocket.send({
                    data: 'send message',
                    success: function () {
                        console.log(' success');
                        that.isSend = "发送成功";
                    },
                    fail: function () {
                        console.log('failed');
                        that.isSend = "发送失败";
                    }
                })
            }
        },
        closeWebsocket: function () {
            var that = this;
            if (that.websocket) {
                that.websocket.close({
                    code: 1000,
                    reason: 'close as normal',
                    success: function () {
                        console.log('close success!!!');
                    },
                    fail: function () {
                        console.log('close fail');
                    }
                })
            }
        },
        connectWebsocket2: function () {
            var that = this;
            that.websocket2 = websocketfactory.create({
                url: 'ws://echo.websocket.org',
                header: {
                    'content-type': 'application/json'
                },
                protocols: ['protocol1']
            })
            that.websocket2.onmessage = function (e) {
                console.log("2 onmessage e = " + e.data);
            }
            that.websocket2.onclose = function (e) {
                console.log("2 onclose e.code = " + e.code + ", e.reason = " + e.reason);
            }
            that.websocket2.onerror = function (e) {
                console.log("2 onerror e.data = " + e.data);
                that.isSuccess2 = "连接失败";
            }
            that.websocket2.onopen = function () {
                console.log('2 connect open');
                that.isSuccess2 = "连接成功"
            }
        },
        sendMessage2: function () {
            var that = this;
            if (that.websocket2) {
                that.websocket2.send({
                    data: 'send2 message',
                    success: function () {
                        console.log('success2');
                        that.isSend2 = "发送成功";
                    },
                    fail: function () {
                        console.log('failed 2');
                        that.isSend2 = "发送失败";
                    }
                })
            }
        },
        closeWebsocket2: function () {
            var that = this;
            if (that.websocket2) {
                that.websocket2.close({
                    code: 1000,
                    reason: 'close as normal',
                    success: function () {
                        console.log('close2 success!!!');
                    },
                    fail: function () {
                        console.log('close2 fail');
                    }
                })
            }
        },
        connectWebsocket3: function () {
            var that = this;
            that.websocket3 = websocketfactory.create({
                url: 'ws://echo.websocket.org',
                header: {
                    'content-type': 'application/json'
                },
                protocols: ['protocol1']
            })
            that.websocket3.onmessage = function (e) {
                console.log("3 onmessage e = " + JSON.stringify(String.fromCharCode.apply(null, new Uint8Array(e.data))));
            }
            that.websocket3.onclose = function (e) {
                console.log("3 onclose e.code = " + e.code + ", e.reason = " + e.reason);
            }
            that.websocket3.onerror = function (e) {
                console.log("3 onerror e.data = " + e.data);
                that.isSuccess3 = "连接失败";
            }
            that.websocket3.onopen = function () {
                console.log('3 connect open');
                that.isSuccess3 = "连接成功"
            }
        },
        sendMessage3: function () {
            var that = this;
            var buffer = new ArrayBuffer(4);
            var a = new Uint8Array(buffer);
            a[0] = 1;
            a[1] = 2;
            a[2] = 3;
            a[3] = 4;
            if (that.websocket3) {
                that.websocket3.send({
                    data: buffer,
                    success: function () {
                        console.log('success3');
                        that.isSend3 = "发送成功";
                    },
                    fail: function () {
                        console.log('failed 3');
                        that.isSend3 = "发送失败";
                    }
                })
            }
        },
        closeWebsocket3: function () {
            var that = this;
            if (that.websocket3) {
                that.websocket3.close({
                    code: 1000,
                    reason: 'close as normal',
                    success: function () {
                        console.log('close3 success!!!');
                    },
                    fail: function () {
                        console.log('close3 fail');
                    }
                })
            }
        }
    }
</script>