<template>
<div class="hellos" style="overflow: auto;">
<ul class="list">
<li :class="{back:token==item.userInfo.user_id}" v-for="item in list">
<p class="myimg"><img :src="item.userInfo.avatar"/></p>
<p class="myname">{{item.userInfo.user_name}}</p>
<p class="mytext">{{item.msg}}</p>
</li>
</ul>
<van-cell-group>
<van-field v-model="value" placeholder="请输入用户名" @keyup.enter="sendouts"/>
<van-button type="info" @click="sendout">信息按钮</van-button>
</van-cell-group>
</div>
</template>
<script>
import io from "socket.io-client"
import qs from 'qs'
import cookies from 'js-cookie'
import { Toast } from 'vant'
export default {
name: 'HelloWorld',
data() {
return {
value: "",
socket:{},
list:[],
userInfo:{},
token:""
}
},
created(){
this.token =cookies.get('token')
this.getUserInfo()
this.socket=io('ws://47.95.110.109:8000/')
this.socket.on('res',(data)=>{
this.list.push(data)
})
},
methods:{
sendout(){
if(this.value===""){
Toast("输入不能为空")
}else{
this.socket.emit('all',{
msg:this.value,
userInfo:this.userInfo
})
this.value=""
}
},
sendouts(){
this.sendout()
},
getUserInfo(){
var url = "http://api.baxiaobu.com/index.php/home/v1/getUserInfo";
var params = {
user_id:this.token
}
params=qs.stringify(params)
this.axios.post(url,params).then((res)=>{
this.userInfo=res.data.userInfo
})
}
}
}
</script>
