Skip to content
1 contributor

Users who have contributed to this file

121 lines (108 sloc) 3.48 KB
<title>Serverless Chat</title>
<link rel="stylesheet" href="">
window.apiBaseUrl = 'http://localhost:7071';
.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;
<div id="app" class="container">
<img src="" height="68px" width="68px" role="presentation" data-linktype="external">
&nbsp;&nbsp;Serverless Chat&nbsp;&nbsp;
<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" />
<div class="row" v-if="!ready">
<div class="col-sm">
<div v-if="ready">
<transition-group name="slide-fade" tag="div">
<div class="row" v-for="message in messages" v-bind:key="">
<div class="col-sm">
<hr />
<div style="display: inline-block; padding-left: 12px;">
<span class="text-info small"><strong>{{ message.sender }}</strong></span>
{{ message.text }}
<script src=""></script>
<script src=""></script>
<script src=""></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()
connection.on('newMessage', newMessage);
connection.onclose(() => console.log('disconnected'));
.then(() => data.ready = true)
function sendMessage(sender, messageText) {
return`${apiBaseUrl}/api/messages`, {
sender: sender,
text: messageText
}).then(resp =>;
let counter = 0;
function newMessage(message) { = counter++; // vue transitions need an id
You can’t perform that action at this time.