最近在做一个大屏,用socket请求数据,光是请求没有发送,发送也是一样的,废话不多说直接上代码!!!
准备:
与src目录同级,新建一个utils目录,里面放webSocket.js文件
// webSocket.js
const socket = new WebSocket('ws://192.168.8.106:8089/produce/produce')
socket.onopen = function (event) {
console.log('WebSocket 连接已建立')
}
socket.onmessage = function (event) {
const message = event.data
console.log('收到消息:', message)
}
socket.onclose = function (event) {
console.log('WebSocket 连接已关闭')
}
socket.onerror = function (error) {
console.error('WebSocket 错误:', error)
}
// 将 WebSocket 实例作为默认导出
export default socket
使用:
然后再需要用到的文件中引用
import socket from '@/utils/webSocket'
<template>
<div>
{{ list }}
</div>
</template>
<script>
import socket from '@/utils/webSocket'
export default {
name: 'socket-page',
data () {
return {
list: []
}
},
mounted () {
// 监听 WebSocket 消息
socket.onmessage = function (event) {
console.log('接收到的数据', event)
}
// 发送 WebSocket 消息
socket.send('Hello, WebSocket!')
}
}
</script>
<style lang="scss" scoped>
</style>