##前言
最近接了一個專案，要求用websocket連線，結果來了一個.Net的signal，我負責處理前端，拿到後端給的樣例js後，開始著手寫vue這端的連線。
主要目的是實現伺服器向用戶傳送訊息，使用者向伺服器傳送訊息完全可以post請求即可。
如何入手，請先看這個連結<<
##在Vue專案中使用SignalR
首先安裝 SignalR 的package，需要注意的是 SignalR 依賴 jQuery。
npm i signalr jquery --save
為了方便，在webpack.base.conf.js中註冊全域性的jQuery
var webpack = require('webpack')

plugins: [new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
            'root.jQuery': 'jquery'
        })
    ]

然後在main.js中引入 SignalR
import 'signalr'
##我的樣例demo.vue
注意連線的地址，是後端給的，需要和後端溝通，還有“PlatHub”名字也需要和後端溝通，接收訊息的方法ReceiveMsg

<template>
    <div>
        signalr connect
        <div>
            <div>{{showmsg}}</div>
            <input v-model="value" placeholder="請輸入..." />
            <Button type="info" @click="sendMsg">資訊按鈕</Button>
        </div>
    </div>
    </template>
    <script>
    import signalR from 'signalr'
    export default {
      name: "Signalr",
      data() {
          return {
              value: "",
              showmsg: "",
              proxy: {}
          }
      },
      mounted() {
          this.connectServer();
      },
      methods: {
        connectServer() {
            var $this = this;
            var conn = $.hubConnection("https://demo.xxtxb.cn/signalr", { useDefaultPath: false })
            $this.proxy = conn.createHubProxy("PlatHub");
            $this.proxy.on("ReceiveMsg", (data) => {
                $this.showmsg = data;
                console.log('demo ReceiveMsg:', data)
            })
            conn.start().done((data) => {
                $this.sendMsg()
            }).fail((data) => {
              console.log('conn fail')
            });
        },
        sendMsg() {
          var $this = this;
          $.ajax({
              url: 'https://demo.xxtxb.cn/r/RadarError/ToSingle',
              type: 'POST', //GET
              async: true,    //或false,是否非同步
              data: {
                  client: 123,
                  msg: $this.value
              },
              timeout: 5000,    //超時時間
              dataType: 'json',    //返回的資料格式：json/xml/html/script/jsonp/text
              success: function (data, textStatus, jqXHR) {
                  if (data.code == 1) {
                      console.log('傳送成功')
                  }
                  else
                      console.log("對方不線上");
              },
              error: function (xhr, textStatus) {
                  console.log('錯誤')
                  console.log(xhr)
                  console.log(textStatus)
              }
          })
        }
      }
    }
    </script>

    <style>

    </style>