<template> <div > <el-row type="flex" justify="space-between"> <el-col :span="8"> <el-input v-model="sendMessage"></el-input><el-button plain @click="send">发送</el-button> </el-col> </el-row> <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="txtMessage"></el-input> </div></template><script>export default { name: ‘chat‘,data() { return { sendMessage: ‘‘,txtMessage: ‘‘,path: ‘ws://10.211.55.3:6690/Echo‘,socket: ‘‘ } },mounted() { // 初始化 this.init() },created() { },methods: { init: function() { if (typeof (WebSocket) === ‘undefined‘) { alert(‘您的浏览器不支持socket‘) } else { // 实例化socket this.socket = new WebSocket(this.path) // 监听socket连接 this.socket.onopen = this.open // 监听socket错误信息 this.socket.onerror = this.error // 监听socket消息 this.socket.onmessage = this.getMessage } },open: function() { console.log(‘socket连接成功‘) },error: function() { console.log(‘连接错误‘) },getMessage: function(msg) { this.txtMessage = msg.data console.log(msg.data) },send: function() { this.socket.send(this.sendMessage) },close: function() { console.log(‘socket已经关闭‘) } },destroyed() { // 销毁监听 this.socket.onclose = this.close }}</script><style rel="stylesheet/sCSS" lang="sCSS" scoped>.dashboard-container { padding-top: 1px; padding-left: 10px; background-color: rgb(240,242,245); // .chart-wrapper { // background: #fff; // padding: 16px 16px 0; // margin-bottom: 32px; // }}</style>总结
以上是内存溢出为你收集整理的Vue websocket编程全部内容,希望文章能够帮你解决Vue websocket编程所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)