vue配合@aspnet建立socket通信

258 阅读1分钟
<script>
import HelloWorld from "@/components/HelloWorld.vue";
import * as signalR from "@aspnet/signalr";
export default {
  name: "Home",
  components: {
    HelloWorld
  },
  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);
        });
    },
  
    sendClient: function() {
      this.$http.get("http://localhost:5000/BasicApi").then(resp => {
        console.log(resp);
      });
    }
  },
  created: function() {
    let thisVue = this;

var str = "{\"token\":\"huahua\",\"user\":\"xin\",\"userId\":\"123\",\"id\":\"456\",\"type\":\"1\"}";

    this.connection = new signalR.HubConnectionBuilder()
      .withUrl("http://192.168.1.1:8080/notifyhub", {
        skipNegotiation: true,
        accessTokenFactory: () => str,
        transport: signalR.HttpTransportType.WebSockets
      })
      .configureLogging(signalR.LogLevel.Information)
      .build();

	   


    this.connection.qs = { 'test' : '1.0' };
    this.connection.on("ReceiveMessage", function(user, message) {
      thisVue.messages.push({ user, message });
      console.log({ user, message });
    });
    this.connection.on("ReceiveCaller", function(message) {
      let user = "自己"; 
      thisVue.messages.push({ user, message });
      console.log({ user, message });
    });
    this.connection.start();
  }
};
</script>