Untitled
unknown
plain_text
2 years ago
3.7 kB
1
Indexable
Never
<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>