Untitled

<template>
  <SignalR :notifications="notifications" />
  <div class="container">
    <div class="row p-1">
      <div class="col-sm-12">
        <div class="form-group d-flex flex-row align-items-center">
          <label for="userInput" class="px-5">UserName</label>
          <input class="form-control" id="userInput" />
        </div>
      </div>
      <!-- <div class="col-1">User</div>
      <div class="col-5"><input type="text" id="userInput" /></div> -->
    </div>
    <div class="row p-1">
      <div class="col-sm-12">
        <div class="form-group d-flex flex-row align-items-center">
          <label for="messageInput" class="px-5">Message</label>
          <textarea class="form-control textareacss" id="messageInput" rows="3"></textarea>
        </div>
      </div>

      <!-- <div class="col-1">Message</div>
      <div class="col-5">
         <input type="text" class="w-100" id="messageInput" />
      </div> -->
    </div>
    <div class="row p-1">
      <div class="col-sm-12">
        <div class="text-end d-flex justify-content-center">
          <input type="button" class="btn btn-primary" id="sendButton" value="Send Message" />
        </div>
      </div>
    </div>
    <div class="row p-1">
      <div class="col-12">
        <hr />
      </div>
    </div>
    <div class="row p-1">
      <div class="col-12">
        <ul id="messagesList"></ul>
      </div>
    </div>
  </div>
</template>




<script>
import { defineComponent } from "vue";
import SignalR from "./SignalR.vue";
export default defineComponent({
  name: "App2",
  components: {
    SignalR,
  },
  data() {
    return {
      notifications: [],
    };
  },
  // actions
  methods: {
    increment() {
      this.count++;
    },
    pushToArray(message) {
      this.notifications.push(message);
    },
  },
  mounted() {
    var _this = this;
    var connection = new signalR.HubConnectionBuilder()
      .withUrl("https://localhost:7157/notify", {
        skipNegotiation: true,
        transport: signalR.HttpTransportType.WebSockets,
      })
      .build();

    //Disable the send button until connection is established.
    // document.getElementById("sendButton").disabled = true;

    connection.on("ReceiveMessage", function (user, message) {
      try {
        _this.notifications.push({ message, user });
        var li = document.createElement("li");
        document.getElementById("messagesList").appendChild(li);
        // We can assign user-supplied strings to an element's textContent because it
        // is not interpreted as markup. If you're assigning in any other way, you
        // should be aware of possible script injection concerns.
        li.textContent = `${user} says ${message}`;
      } catch (e) {
        console.log(e);
      }
    });

    connection
      .start()
      .then(function () {
        console.log("2");
        document.getElementById("sendButton").disabled = false;
      })
      .catch(function (err) {
        return console.error(err.toString());
      });

    document
      .getElementById("sendButton")
      .addEventListener("click", function (event) {
        console.log("3");
        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();
      });
  },
});
</script>

<style scoped>
.textareacss {
  overflow: hidden;
}
</style>