運行結果如下：

程序結構如下：

關鍵代碼：

App.vue

<template><a-layout class="layout"><a-layout-header><a-menutheme="dark"mode="horizontal"v-model:selectedKeys="selectedKeys":style="{ lineHeight: '64px' }"><a-menu-item key="title">Ant Design Vue WebService實例</a-menu-item></a-menu></a-layout-header><br/><a-layout-content style="padding: 0 50px"><SendMsg></SendMsg></a-layout-content><a-layout-footer style="text-align: center">Footer</a-layout-footer></a-layout> </template><script>import {defineComponent} from 'vue'import SendMsg from './components/SendMsg'export default defineComponent({name: 'app',components: {SendMsg}}); </script><style>.site-layout-content {min-height: 280px;padding: 24px;background: #fff;}#components-layout-demo-top .logo {float: left;width: 120px;height: 31px;margin: 16px 24px 16px 0;background: rgba(255, 255, 255, 0.3);}.ant-row-rtl #components-layout-demo-top .logo {float: right;margin: 16px 0 16px 24px;}[data-theme='dark'] .site-layout-content {background: #141414;} </style>

SendMsg.vue

<template><a-form :label-col="labelCol" :wrapper-col="wrapperCol"><a-form-item label="消息" v-bind="validateInfos['msg.content']"><a-input v-model:value="modelRef.msg.content" /></a-form-item><a-form-item :wrapper-col="{ span: 14, offset: 4 }"><a-button type="primary" @click.prevent="onSubmit">發送</a-button><a-button style="margin-left: 10px" @click="reset">重置</a-button></a-form-item></a-form> </template><script lang="ts">import { defineComponent, reactive, onMounted } from 'vue';import { useForm } from '@ant-design-vue/use';import { notification } from 'ant-design-vue';import axios from 'axios';export default defineComponent({name: 'SendMsg',setup() {let websocket;let token;const modelRef = reactive({msg: {content: '',}});const { resetFields, validateInfos } = useForm(modelRef,reactive({name: [{required: true,message: 'Please input name',},],'msg.content': [{required: true,message: 'Please input sub name',},],}),);const onSubmit = () => {axios.post('/msg', {msg: modelRef.msg.content}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});};const reset = () => {resetFields();};const onOpen = () => {console.log('WebSocket連接成功，狀態碼：', websocket.readyState)};const onMessage = (event) => {console.log('WebSocket收到消息：', event.data);notification['info']({message: '收到消息',description: event.data,});};const onError = () => {console.log('WebSocket連接錯誤，狀態碼：', websocket.readyState)};const onClose = () => {console.log('WebSocket連接關閉，狀態碼：', websocket.readyState)};const initWebSocket = () => {// 連接成功websocket.onopen = onOpen;// 收到消息的回調websocket.onmessage = onMessage;// 連接錯誤websocket.onerror = onError;// 連接關閉的回調websocket.onclose = onClose;};onMounted(() => {// WebSocketif ('WebSocket' in window) {token = Math.floor(Math.random() * 100000) + 1;// 連接地址：ws://127.0.0.1:8880/ws/xxxwebsocket = new WebSocket(process.env.VUE_APP_WS_SERVER + '/ws/' + token);initWebSocket()// 關閉// websocket.close();} else {alert('當前瀏覽器 不支持')}});return {labelCol: { span: 4 },wrapperCol: { span: 14 },validateInfos,reset,modelRef,onSubmit,};},}); </script>

main.js

import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; import axios from 'axios';axios.defaults.baseURL = process.env.VUE_APP_SERVER;const app = createApp(App); app.use(Antd).mount('#app');

?

?

總結

以上是生活随笔為你收集整理的Vue笔记-Ant Design Vue构建前端连接后端WebSocket的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。