examples/module/chatroom-demo.we

<template>
  <div class="container">
    <list class="list" loadmore="loadmore" loadmoreoffset="500">
      <cell repeat="{{row in rows}}" append="tree">
        <div class="item">
          <text class="item-title" style="text-align:{{row.align}};background-color:{{row.bg}} ">{{row.message}}</text>
        </div>
      </cell>
      <cell>
        <text id="cellfoot" style="margin-bottom: 40"></text>
      </cell>
    </list>

    <div style="flex-direction: row; justify-content: center;">
      <input
              type="text"
              placeholder="请输入聊天信息"
              class="input"
              autofocus="false"
              value=""
              onchange="onchange"
              oninput="oninput"
              id = "input"
      />
      <!--<text class="button" onclick="{{connect}}">connect</text>-->
      <text class="button" onclick="{{send}}">发送</text>
    </div>
    <text id="foot" style="color: #000000;height: 40"></text>
  </div>
</template>

<style>
  .input {
    font-size: 40;
    height: 80;
    width: 500;
    margin-bottom: 40px;
    border-width: 2;
    border-style: solid;
    border-color: rgb(162, 217, 192);
  }
  .button {
    font-size: 36;
    width: 150;
    height: 80;
    text-align: center;
    padding-top: 15;
    padding-bottom: 15;
    border-width: 2;
    border-style: solid;
    margin-right: 20;
    margin-left: 20;
    border-color: rgb(162, 217, 192);
    background-color:#00BFFF;
    color: white;
    font-weight: 900;
    box-shadow: 1 1px 8px rgba(205, 155, 29, 0.85);
  }
  .button:active {
    background-color: #1E90FF;
    box-shadow: 1 4px 6px rgba(255, 99, 71, 0.85);
  }
  .container{
    flex:1;
    justify-content: center;
    align-items: center;
    /*background-color: #f8f8f8;*/
    flex-direction: column;
    border-top-style:solid;
    border-top-width:2;
    border-top-color:#DFDFDF;
  }
  .list {
    flex:1;
    width:750;
    /*transform:rotate(180deg);*/
    justify-content: center;
    align-items: center;
    /*background-color: #abcdef;*/
    flex-direction: column;
    border-top-style:solid;
    border-top-width:2;
    border-top-color:#DFDFDF;
  }
  .row {

  }
  .item {
    justify-content: center;
    /*border-bottom-width: 2px;*/
    /*border-bottom-color: #c0c0c0;*/
    height: 60px;
    padding:20px;
    margin-top: 5;
    /*transform:rotate(180deg);*/
  }
  .item-title {
    font-size:30px;
    height: 60px;
    padding-top: 10;
    padding-right: 20;
    padding-left: 20;
  }
</style>

<script>
  var dom = require('@weex-module/dom');
  var websocket = require('@weex-module/webSocket');
  module.exports = {
    data: {
      rows:[],
      names:['A','B','C','D','E','F','H','G'],
      connectinfo: '',
      sendinfo: '',
      onopeninfo: '',
      onmessage: '',
      oncloseinfo: '',
      onerrorinfo: '',
      closeinfo: '',
      txtInput:'',
      info:'',
      message:'',
      align:'left',
      bg:'white',
      from_client_id:'',
      name:'',
      number:1
    },
    methods: {
      ready:function(){
        var self = this;
        self.connect();
      },
      connect:function() {
        websocket.WebSocket('ws://chat.workerman.net:7272/','');
        var self = this;
        self.info = 'connecting...'
        websocket.onopen = function(e)
        {
          self.info = 'websocket open';
          var count = self.names.length;
          var id=Math.ceil(Math.random()*count);
          self.name = self.names[id];
          var loginData='{"type":"login","client_name":"'+self.name+'","room_id":"1"}';
          self.login(loginData);
        }

        websocket.onmessage = function(e)
        {
          self.onmessage = e.data;
          var message = JSON.parse(e.data);
          self.align = 'left';
          self.bg = 'white';
          var loginMessage = '';
          if(message.type == 'login' ){
            if (self.from_client_id.length == 0)
            {
              self.from_client_id = message.client_id;
//            self.info = 'type is login';
              self.align = 'right';
              self.bg = '#00CD00';
              loginMessage = self.name+' 欢迎您加入了聊天室';
            }else {
              self.info = 'type is login';
              self.align = 'left';
              self.bg = 'white';
              loginMessage = message.client_name+'加入了聊天室';
            }
          }
          if(self.from_client_id == message.from_client_id)
          {
            self.align = 'right';
            self.bg = '#00CD00';
          }
//          self.info =  message.type;
          if(message.type == 'ping'){
//            self.info = 'type is ping';
          }
//          self.info =  e.data;
          if(message.type == 'login')
          {
            self.rows.push({message:loginMessage,align:self.align,bg:self.bg});
          }else if(message.type == 'logout')
          {
            self.rows.push({message:message.from_client_name+'离开了聊天室',align:self.align,bg:self.bg});
          }

          if(message.content ){
            self.rows.push({message:message.from_client_name+':'+message.content,align:self.align,bg:self.bg});
            if(self.rows.length>16){
              dom.scrollToElement(self.$el('cellfoot'), { offset: 0 })
            }
          }


        }
        websocket.onerror = function(e)
        {
          self.onerrorinfo = e.data;
        }
        websocket.onclose = function(e)
        {
          self.onopeninfo = '';
          self.onerrorinfo = e.code;
        }
      },
      login:function (loginInfo) {
        websocket.send(loginInfo);
      },
      send:function(e) {

        var input = this.$el('input');
        input.blur();
        var self = this;
        var sendinfo = '{"type":"say","from_client_id":"'+self.from_client_id+'","from_client_name":"'+'游客'+'","to_client_id":"all","content":"'+this.txtInput+'","time":"2017-03-15 01:04:00"}'
        websocket.send(sendinfo);
//        this.info = sendinfo;
      },
      oninput: function(event) {
        this.txtInput = event.value;
      },
      close:function(e) {
        websocket.close();
      },
    },
  }
</script>