app端的websocket

2020-08-04 14:40:40 阅读:5 编辑

js/pages/common/wx.js

/************************ websocket begin ********************************/
function connectSocket(obj) {
    var _socketTask = new SocketTask(obj);
    return _socketTask;
    // var bmWebSocket = weex.requireModule('bmWebSocket');
}

function onSocketOpen(callback) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.onopen(function (e) {
        return callback();
    });
}

function onSocketMessage(callback) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.onmessage(function (e) {
        return callback({data: e.data});
    });
}

function onSocketError(callback) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.onerror(function (e) {
        return callback({errMsg: e.data});
    });
}

function onSocketClose(callback) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.onclose(function (e) {
        return callback({code: e.code,reason:""});
    });
}

function sendSocketMessage(obj) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.send(obj.data);
}

function closeSocket(obj) {
    var bmWebSocket = weex.requireModule('bmWebSocket');
    bmWebSocket.close(obj.code, obj.reason);
}

/************************ websocket end ********************************/
connectSocket,
    onSocketOpen,
    onSocketMessage,
    onSocketError,
    onSocketClose,
    sendSocketMessage,
    closeSocket,

js/pages/common/SocketTask.js

module.exports = class SocketTask {

    constructor(obj) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.webSocket(obj.url);
    }

    onOpen(callback) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.onopen(function (e) {
            return callback();
        });
    }

    onMessage(callback) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.onmessage(function (e) {
            return callback({data: e.data});
        });
    }

    onError(callback) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.onerror(function (e) {
            return callback({errMsg: e.data});
        });
    }

    onClose(callback) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.onclose(function (e) {
            return callback({code: e.code, reason: ""});
        });
    }

    close(obj) {
        var bmWebSocket = weex.requireModule('bmWebSocket');
        bmWebSocket.close(obj.code, obj.reason);
    }
}

demo

<template>
  <scroller ref="list" :style="page_style">
    <refresh class="refresh" @refresh="onrefresh" :display="refreshing ?'show':'hide'">
      <text class="indicator-text">正在刷新 ...</text>
      <loading-indicator class="indicator"></loading-indicator>
    </refresh>
    <text @click="click" style="padding:20px;font-size:50px;">跳转第二页</text>
    <text style="font-size:50px">{{msg}}</text>
    <text v-for="(num, index) in arr" class="text">这是第 {{num}} 条数据</text>
  </scroller>
</template>
<style scoped>
  .text {
    font-size: 50px;
  }
  .refresh {
    width: 750px;
    position: absolute;
    height: 120px;
    top: 0;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 42px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
  }
</style>
<script>
    import wx from './../../common/wx'
    import console from './../../common/console'
    export default {
        data() {
            return {
                arr: [],
                refreshing: false,
                msg:""
            }
        },
        mixins: [require('./../../common/publish').publish],
        created() {
            //this.getData();
        },
        computed: {
            page_style: function () {
                var statusBarHeight = weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40;
                return {paddingTop: statusBarHeight};
            }
        },
        methods: {
            click() {
                var that = this;
                wx.connectSocket({
                    url: 'ws://192.168.1.161:8090'
                })

                wx.onSocketOpen(function(res) {
                    //wx.alert("onSocketOpen");
                    wx.sendSocketMessage({data:'hello'})
                });
                wx.onSocketClose(function(res) {
                    that.msg ="websocket close,code:" + res.code + ",reason:" +res.reason;
                });
                wx.onSocketError(function(res) {
                    that.msg = "errMsg:" + res.errMsg;
                });
                wx.onSocketMessage(function(res) {
                    that.msg = "msg:" + res.data;
                });
            },
            getData() {
                this.arr = [];
                var random = Math.random();
                for (let i = 0; i < 30; i++) {
                    this.arr.push(random + i + 1)
                }
            },
            onrefresh() {
                this.refreshing = true;
                setTimeout(() => {
                    this.getData();
                    this.refreshing = false;
                }, 1000)
            }
        }
    }
</script>

server demo

// websocket.js

const WebSocket = require('ws');
var colors = require('colors');
var config = require(__dirname +"/config.js");
var file = config.eros_dev_js;
colors.setTheme({
    log: 'bgGreen',
    help: 'cyan',
    warn: 'yellow',
    success: 'bgBlue',
    error: 'red'
});
const wss = new WebSocket.Server({port: 8090});
wss.on('connection', function connection(ws) {
    console.log('开启连接')
    ws.on('message', function incoming(result) {
        console.log(result);
        ws.send(result + " back");

    });
    ws.on('close', function incoming(result) {
        console.log('关闭连接')

    });
});