前端websocket配置

前端

// App.vue
<script lang="ts" setup>
import {
    
     onMounted } from 'vue';
onMounted(() => {
    
    
	let websocket = new WebSocket('ws://10.33.37.44:3000/websocket/5');
	websocket.onopen = () => console.log('websocket连接成功')
	websocket.onclose = () => console.log('websocket连接失败')
	websocket.onmessage = (event) => {
    
    
	  console.log(JSON.parse(event.data))
	  window.dispatchEvent(new CustomEvent('onMsg',{
    
    
	    detail: {
    
    
	      data: event.data
	    }
	  }))
	}
})
</script>

// 在需要使用websocket数据的组件中
onMounted(() => {
    
    
	window.addEventListener('onMsg', (res) => {
    
    
		console.log(res.detail.data)
	})
})

Vue配置全局websocket