·? ? 引入JQ:vue 全局引入 jquery - 簡書
·?????引入signalr? “jquery.signalR-2.4.1.min.js”
·?????引入hubs文件(接口定義的方法程腹,可忽略)
·? ? ?連接
var connection = $.hubConnection();
connection.start()
這樣直接連接噪馏,默認(rèn)連接的是本地的服務(wù)(http://localhost/8100)?
這段代碼寫在?beforeMount 或者更早一點的鉤子函數(shù)
解決辦法:
$.connection.hub.url = "連接地址";
$.connection.hub .start()
·? ? 判斷連接狀態(tài)
$.connection.hub.start()執(zhí)行之后會有 “.done”? “.fail”來判斷是否連接成功
$.connection.hub.start().done(function () {console.log("Connected")})
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.fail(function (a) {Unable to connect})
·? ? 連接失敗原因
? ? ? 失敗的原因很多,大致是跨域止潘、地址不對、引入文件不對窖式、token沒有或者失效
? ? ? 如果是跨域以及地址問題 和 后端溝通解決辦法
? ? ? 如果是引入的文件不對可以直接引入服務(wù)器文件掛在 public 下的 html 文件
? ? ? ?缺少 token 的原因:溝通 token 格式并在 start() 前加入 $.connection.hub.qs = { authorization: "token" };
·? ? ?接收消息
? ? ? ?let chat = $.connection.chatHub;?chatHub為后端定義
? ? ? ?實例化后調(diào)用 “onMessage” 來接受消息
let _this = this;
chat.client.onMessage = function (name, messageType, message) {
? ? ? ? console.log(name, messageType, message)
? ? ? ?// 具體接受幾個參數(shù)根據(jù)?onMessage 定義決定(后端)
? ? ? ? // 需要注意在這里用 this 指向不對需要用?_this
};
·? ? 發(fā)送消息
? ? ?由于發(fā)送消息是一定是要基于 start() 成功來執(zhí)行的扫责,所以要監(jiān)聽連接是否成功來執(zhí)行是否發(fā)送消息
在 data 中定義一個 flag
data() { return {
? ? IfConnect: false
} }
在 beforeMount 執(zhí)行的連接代碼中嵌入?IfConnect
let _this = this;
$.connection.hub.start().done(function () { _this.IfConnect = true; })?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?.fail(function (a) {?_this.IfConnect = false; })
發(fā)送前校驗?IfConnect 狀態(tài)來發(fā)送
let?chat = $.connection.chatHub;
chat.server.send("這是一條消息");
·? ? ? ?監(jiān)聽錯誤
$.connection.hub.error(function (error) {
????console.log(error);
});
·? ? ? ? 生成日志
$.connection.hub.logging =true;
$.connection.hub.start();