<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>