在 Vue.js 2.x 中使用 SignalR 可以通过 SignalR 客户端库实现。通常,你需要在 Vue.js 中引入 SignalR 客户端库,并在 Vue 组件中使用它来连接 SignalR Hub 并处理来自服务器的消息。
以下是一个简单的示例,演示了如何在 Vue.js 2.x 中使用 SignalR:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| created() { this.initSignalR() }, import API_CONFIG from '../vue.config.js'
initSignalR () { var targetUri = API_CONFIG.devServer.proxy["/api"].target; this.connection = new signalR.HubConnectionBuilder() .withUrl(`${targetUri}/api2/chatHub`, { skipNegotiation: true, transport: signalR.HttpTransportType.WebSockets}).build() this.connection.on('ConnectSucceeded', data => { console.log(data) }) this.connection.on('SendNotifyMessage', data => { this.$notify.success({ title: 'success', message: data, showClose: false, offset: 100 }); }) this.connection.start() }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
[HttpGet("send-notify-message")] public Task<MessageModel<string>> SendNotifyMessage() { Console.WriteLine("SendNotifyMessage"); Task.Run(async () => { await Task.Delay(10000); _hubContext.Clients.All.SendAsync("SendNotifyMessage", $"{DateTime.Now:yyyy-MM-dd hh:mm:ss zz}").Wait(); });
var result = new MessageModel<string> { msg = "获取成功", success = true, response = null }; return Task.FromResult<MessageModel<string>>(result); }
|