聊天

布局：

<template>
    <div class="home">

    <ul>
        <li v-for="(item,index) in list">
            {{item}}
        </li>
    </ul>
    
    <van-cell-group>
      <van-field
        v-model="msg"
        center
        clearable
        placeholder="请输入信息"
      >
        <van-button slot="button" size="small" type="primary" @click="handleClick">发送</van-button>
      </van-field>
    </van-cell-group>
</div>
</template>

js：

<script>

import io from 'socket.io-client';

export default {
    data(){
        return {
            socket:{},
            msg:'',
            list: []
        }
    },
    created(){
        // 初始化
        this.socket = io('ws://47.95.110.109:8000/')
    },
    mounted(){
        // 监听收到的信息
        this.socket.on('res', (data)=>{
            this.list.push(data);
        })
    },
    methods: {
        handleClick(){
            // 发送
            this.socket.emit('all', this.msg)
            this.msg = ""
        }
    }
}
</script>

css:

    <style lang="less">
    .home {
        width: 100%;
        height: 100%;
        position: relative;
    
      .van-cell-group{
        bottom: 0px;
        width: 100%;
        position: absolute;
    }
}
  </style>