Skip to content
Permalink
1 contributor

Users who have contributed to this file

121 lines (108 sloc) 3.48 KB
<html>
<head>
<title>Serverless Chat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css">
<script>
window.apiBaseUrl = 'http://localhost:7071';
</script>
<style>
.slide-fade-enter-active, .slide-fade-leave-active {
transition: all 1s ease;
}
.slide-fade-enter, .slide-fade-leave-to {
height: 0px;
overflow-y: hidden;
opacity: 0;
}
</style>
</head>
<body>
<p>&nbsp;</p>
<div id="app" class="container">
<h3>
<img src="https://raw.githubusercontent.com/Azure/azure-functions-cli/master/src/Azure.Functions.Cli/npm/assets/azure-functions-logo-color-raster.png" height="68px" width="68px" role="presentation" data-linktype="external">
&nbsp;&nbsp;Serverless Chat&nbsp;&nbsp;
</h3>
<div class="row" v-if="ready">
<div class="signalr-demo col-sm">
<hr />
<form v-on:submit.prevent="sendNewMessage">
<input type="text" v-model="newMessage" id="message-box" class="form-control" placeholder="Type message here..." autocomplete="off" />
</form>
</div>
</div>
<div class="row" v-if="!ready">
<div class="col-sm">
<div>Loading...</div>
</div>
</div>
<div v-if="ready">
<transition-group name="slide-fade" tag="div">
<div class="row" v-for="message in messages" v-bind:key="message.id">
<div class="col-sm">
<hr />
<div>
<div style="display: inline-block; padding-left: 12px;">
<div>
<span class="text-info small"><strong>{{ message.sender }}</strong></span>
</div>
<div>
{{ message.text }}
</div>
</div>
</div>
</div>
</div>
</div>
</transition-group>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@aspnet/signalr@1.1.2/dist/browser/signalr.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>
<script>
const data = {
username: '',
newMessage: '',
messages: [],
ready: false
};
const app = new Vue({
el: '#app',
data: data,
methods: {
sendNewMessage: function () {
sendMessage(this.username, this.newMessage);
this.newMessage = '';
}
}
});
const apiBaseUrl = prompt('Enter the Azure Function app base URL', window.apiBaseUrl);
data.username = prompt("Enter your username");
if (!data.username) {
alert("No username entered. Reload page and try again.");
throw "No username entered";
}
const connection = new signalR.HubConnectionBuilder()
.withUrl(`${apiBaseUrl}/api`)
.configureLogging(signalR.LogLevel.Information)
.build();
connection.on('newMessage', newMessage);
connection.onclose(() => console.log('disconnected'));
console.log('connecting...');
connection.start()
.then(() => data.ready = true)
.catch(console.error);
function sendMessage(sender, messageText) {
return axios.post(`${apiBaseUrl}/api/messages`, {
sender: sender,
text: messageText
}).then(resp => resp.data);
}
let counter = 0;
function newMessage(message) {
message.id = counter++; // vue transitions need an id
data.messages.unshift(message);
}
</script>
</body>
</html>
You can’t perform that action at this time.