本文主要是介绍【HTML5-webscoket实时通信（vue）】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
<div class="box" id="app"><h2>当前在线：<span id="num">0</span>人</h2><h2>客户端FD：{{fd}}</h2><div id="client_id"><div class="msg" v-for="(item,index) in msg" :key="index">{{item}}</div></div><textarea type="text" id="content" v-model="content" style="width: 240px;height: 50px;"></textarea><br/><button id="btn" @click="send">发送</button></div>
.box{margin:0px auto;}#client_id{width: 600px;height: 400px;border: 1px solid #ccc;margin-bottom: 10px;}input{height: 30px;line-height: 30px;border-radius: 4px;font-size: 14px;border: 1px solid #a5a5a5;width: 200px;}button{background-color: #339ce2;color: #fff;margin: 4px;padding: 10px 2px;border-radius: 10px;border: 1px solid #ccc;}.msg{height: 30px;line-height: 30px;background-color: #862955;color: #fff;border-bottom: 1px solid #ccc;padding-left: 14px;margin-top: 5px;}
var app = new Vue({el:"#app",data:{fd:'',num:'',content:'',msg:[],},created(){this.initWebSocket();},methods:{initWebSocket(){const wsurl = 'wss:...';this.websocket = new WebSocket(wsurl);this.websocket.onmessage = this.websocketonmessage;this.websocket.onopen = this.websocketonopen;this.websocket.onerror = this.websocketonerror;this.websocket.onclose = this.websocketonclose;},send(){data = { };//data需要用什么传什么console.log(data);this.websocket.send(JSON.stringify(data));//this.$data.msg.push(this.$data.fd+"说:"+this.$data.content);this.$data.content = '';},websocketonmessage(e){var data = JSON.parse(e.data);if(data.type =='login'){this.$data.msg.push(data.fd+'进入了聊天室');}if(data.type=='close'){this.$data.msg.push(data.fd+'离开了聊天室');}if(data.type=='msg'){var recev_msg = JSON.parse(data.data);// this.$data.msg.push(data.fd+"说："+ recev_msg.content)//图像： recev_msg.avatar 发送时间：data.timethis.$data.msg.push(recev_msg.user_nickname+"说："+ recev_msg.content)}this.$data.fd = data.fd;if(data.type=='login'){this.$data.msg.push(data.num);}this.$data.num = data.num;//this.$data.msg.push(data);},websocketonopen(e){data = {courseid: courseid,uid:uid,type:'login'// user_nickname:user_nickname,// avatar:avatar,};this.websocket.send(JSON.stringify(data));this.$data.msg.push("链接成功")},websocketonclose(e){},websocketonerror(e){},}})这篇关于【HTML5-webscoket实时通信（vue）】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
