websocket+vue使⽤(简单例⼦)
WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议。
浏览器通过 JavaScript 向服务器发出建⽴ WebSocket 连接的请求,连接建⽴以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() ⽅法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
⽬前⼤部分浏览器⽀持 WebSocket() 接⼝
看⼀下下⾯的例⼦:
需求:在⼀个表格中实时接收后端传过来的数据
1.定义表格需要绑定的数组,已经websocket的初始化对象
data(){
return{
tableData1:[],//表格数据
ws:null//websocket
}
},
2.写关于websocket的⽅法
methods:{
WebSocketTest(){
if('WebSocket'in window){
alert('您的浏览器⽀持 WebSocket!')
// 打开⼀个 web socket
this.ws =new WebSocket('ws://177.10.10.10:8585/websocket/textname')//与后端连接的端⼝//发送数据
pen=function(){
// Web Socket 已连接上,使⽤ send() ⽅法发送数据
// alert('数据发送中...')
}
var that =this
// 接收数据
ssage=function(evt){
let received =JSON.parse(evt.data)
alert('数据已接收...')
//将收到的数据push到表格中去
that.tableData1.push(received)
console.log(that.tableData1)
}
//关闭
lose =this.close
}
},
// websocket关闭
close(){
前端websocket怎么用alert('连接已关闭...')
},
}
完成

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。