vue3.0 + SignalR（vue客戶端 + net core3.0服務端）
阿新 • • 發佈：2021-10-09
一、 net core3.0服務端搭建
1. 建立core的web應用程式，專案建好之後右鍵專案->新增>客戶端庫。
2.把Pages下面的Index檢視的程式碼換成如下：
@page
<div class="container">
<div class="row"> </div>
<div class="row">
<div class="col-2">User</div>
<div class="col-4"><input type="text" id="userInput" /></div>
</div>
<div class="row">
<div class="col-2">Message</div>
<div class="col-4"><input type="text" id="messageInput" /></div>
</div>
<div class="row"> </div>
<div class="row">
<div class="col-6">
<input type="button" id="sendButton" value="Send Message" />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-6">
<ul id="messagesList"></ul>
</div>
</div>
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/chat.js"></script> |
3.在放靜態檔案的wwwroot的js下面新建一個chat.js，並放入如下程式碼：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
}); |
4. 專案根目錄新增Hubs資料夾，加個ChatHub類：
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();
//Disable send button until connection is established
document.getElementById("sendButton").disabled = true;
connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
connection.start().then(function () {
document.getElementById("sendButton").disabled = false;
}).catch(function (err) {
return console.error(err.toString());
});
document.getElementById("sendButton").addEventListener("click", function (event) {
var user = document.getElementById("userInput").value;
var message = document.getElementById("messageInput").value;
connection.invoke("SendMessage", user, message).catch(function (err) {
return console.error(err.toString());
});
event.preventDefault();
}); |
5.在Startup裡配置SignalR - ConfigureServices里加上
services.AddSignalR(); |
6.在Startup裡配置SignalR - Configure里加上
app.UseEndpoints(endpoints =>
{
endpoints.MapRazorPages();
endpoints.MapHub<ChatHub>("/chathub");
});
|
7. 至此，服務端已經搭建完成，可執行看下效果，效果如下：
二、vue3.0 客戶端搭建
1. 安裝signalr前端客戶端包：
npm install @aspnet/signalr |
2. 專案新建測試檔案 SignalR.vue 檔案內容如下
<template>
<div class="home">
<h1>前端演示SignalR</h1>
<input v-model="user" type="text" />
<input v-model="message" type="text" />
<button @click="sendAll">傳送全部</button>
<button @click="sendOwn">對自己傳送</button>
<div>
<ul v-for="(item ,index) in messages" v-bind:key="index +'itemMessage'">
<li>{{item.user}} says {{item.message}}</li>
</ul>
</div>
</div>
</template>
<script>
import * as signalR from "@aspnet/signalr";
export default {
name: "SignalR",
components: {},
data() {
return {
user: "", //使用者
message: "", //訊息
connection: "", //signalr連線
messages: [] //返回訊息
};
},
methods: {
//給全部發送訊息
sendAll: function() {
this.connection
.invoke("SendMessage", this.user, this.message)
.catch(function(err) {
return console.error(err);
});
},
//只給自己傳送訊息
sendOwn: function() {
this.connection
.invoke("SendMessageCaller", this.message)
.catch(function(err) {
return console.error(err);
});
}
},
created: function() {
let thisVue = this;
this.connection = new signalR.HubConnectionBuilder()
.withUrl("http://localhost:13989/chathub", {
skipNegotiation: true,
transport: signalR.HttpTransportType.WebSockets
})
.configureLogging(signalR.LogLevel.Information)
.build();
this.connection.on("ReceiveMessage", function(user, message) {
thisVue.messages.push({ user, message });
console.log({ user, message });
});
this.connection.on("ReceiveCaller", function(message) {
let user = "自己";//這裡為了push不報錯，我就弄了一個預設值。
thisVue.messages.push({ user, message });
console.log({ user, message });
});
this.connection.start();
}
};
</script>
|
3. 執行效果如下
4. 至此，vue客戶端搭建完成