##Foreword
Recently, I received a project that requires using websocket to connect. As a result, a. Net signal came. I was responsible for processing the front end. After getting the sample js given by the back end, I started to write the connection of vue.
The main purpose is to realize that the server sends messages to the user, and the user can post the message to the server.
How to start? Please look at this first Links<<
##Using SignalR in Vue projects
First, install the package of SignalR. Note that SignalR relies on jQuery.
npm i signalr jquery --save
For convenience, register the global jQuery in webpack.base.conf.js
var webpack = require('webpack')

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

Then introduce SignalR in main.js
import 'signalr'
##My sample demo.vue
Note that the address of the connection is given by the back-end. It needs to communicate with the back-end. The name of "PlatHub" also needs to communicate with the back-end. The method of receiving messages, ReceiveMsg, also needs to communicate with the back-end. In fact, AJAX is not a SignalR. It must be noted that the success of conn.start(). Done ((data) = > {})) indicates the success of the SignalR connection

<template>
    <div>
        signalr connect
        <div>
            <div>{{showmsg}}</div>
            <input v-model="value" placeholder="Please enter..." />
            <Button type="info" @click="sendMsg">Message button</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,    //Or false, asynchronous or not
              data: {
                  client: 123,
                  msg: $this.value
              },
              timeout: 5000,    //Timeout
              dataType: 'json',    //Returned data format: JSON / XML / HTML / script / JSON / text
              success: function (data, textStatus, jqXHR) {
                  if (data.code == 1) {
                      console.log('Sent successfully')
                  }
                  else
                      console.log("The other party is not online");
              },
              error: function (xhr, textStatus) {
                  console.log('error')
                  console.log(xhr)
                  console.log(textStatus)
              }
          })
        }
      }
    }
    </script>

    <style>

    </style>