SignalR和Vue之间数据通讯

 
@{
	ViewData["Title"] = "分拣";
}

<div id="app">
	<div>
		<el-row> 

			<span>{{message}}</span>

		</el-row>
		<br />
		<br />  

	</div>
</div>

<script>
	const App =
	{ 
		data() {
			return {
				connectionHub: null,
 
				message: 'hello word ',  
			}
		},
		methods: { 

			ShowMsg(user,msgInfo) {
				this.message = msgInfo;
			},		
     	sendMessageToHub() {
				let user = "easyboot";
				let message = "Hello";
				this.connectionHub
					.invoke("CallByClient", user, message)  // invoke(方法名, 参数)
					.then(() => console.log("send succeed!"));
			},

		},
		mounted() { 
		},

		created() {
			// 建立连接
			//var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
			this.connectionHub = new signalR.HubConnectionBuilder()
				.withUrl("/chatHub") // 此处填服务器地址
				.withAutomaticReconnect()  // 断开自动重连
				.build();

			// 注册方法（给后端调用的，需要在methods中定义） 
			this.connectionHub.on("OnHubMessage", this.ShowMsg);
 

			// 开始连接
			this.connectionHub
				.start()
				.then((res) => console.log("Connected!"))
				.catch((err) => {
					console.log(err);
				});
		},

 
	}
	const app = Vue.createApp(App);
	app.use(ElementPlus);
	app.mount('#app') 

</script>

<script src="~/js/signalr/dist/browser/signalr.js"></script>
@*<script src="~/js/SignalrSerial.js"></script>*@