Giter VIP home page Giter VIP logo

serverlessnotifications's Introduction

Serverless notifications with Azure Cosmos DB + Azure Functions + Azure SignalR

This repo contains a reusable solution that creates a complete serverless scenario for a chat application that stores data in Azure Cosmos DB, Azure Functions for hosting and event processing and Azure SignalR for websocket client messaging.

To achieve complete serverless, this solution is using:

How does it work?

The solution will provision one Azure Function App with multiple Functions.

  • FileServer: Acts as a serverless File server for static files that will let a Web client browse and obtain the files in the www folder.
  • SaveChat: Will receive data from the connected Web clients and save it to Azure Cosmos DB.
  • SignalRConfiguration: Will send the required information to the Web client to initialize SignalR Websocket connection.
  • FeedToSignalR: Will trigger on new data in Azure Cosmos DB and broadcast it through Azure Signal R to all connected clients.

In order to support custom routes (particularly for the static Web host), it implements Azure Functions Proxies through a proxies.json file. So when browsing the base URL, it is instead calling one of the HTTP triggered Functions.

  1. When the Web client loads the static resources, it pulls the SignalR configuration from SignalRConfiguration.

  2. It will then negotiate with Azure SignalR the best transport protocol. SignalR connections

  3. When the user writes a message, it will save it to Azure Cosmos DB via an Ajax call to SaveChat Connected chat

  4. Each chat line is stored as a Document in Azure Cosmos DB. Stored document

  5. The FeedToSignalR will trigger and broadcast it to all Azure SignalR connected clients. Triggers

This solution does not create any server instance on your subscription, it runs completely on Azure Function's Consumption Plan and consumes Azure Cosmos DB as a serverless database and Azure SignalR as a serverless websocket notification service.

Requirements

  1. Have a pre-existing Azure Cosmos DB account to obtain the Connection String, the account needs to be a SQL API account. REMARKS: the format of the connection string should be "Endpoint=https://{cosmosdb-name}.service.signalr.net;AccessKey={key};".
    1. Create a database called chat and a collection called lines (it can be the smallest possible 400RU collection).
  2. Have a pre-existing Azure SignalR account to obtain the Connection String.

How can I use this repo?

Run it locally

Clone this repo, fill out the local.settings.json file with the Connection Strings for Azure Cosmos DB and Azure SignalR and run it with F5!

Open your browser in the base address informed by the Azure Function's runtime (something along the lines of http://localhost:<some-port>).

Deploy it with one click

Just click in the Deploy to Azure button and it will guide you into automatically creating the Azure Function app with all the code deployed on Azure.

Open your browser in the base address informed by the Azure Function's Portal (something along the lines of https://<your-app-name>.azurewebsites.net).

Acknowledges

serverlessnotifications's People

Contributors

ealsur avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

serverlessnotifications's Issues

CORS blocked access orign request on local Environment

I followed the instruction step by step from the source code:
but I got stuck with the Error
Access to XMLHttpRequest at 'https://cosmos-XXXX-dev.documents.azure.com/:5001/client/negotiate?hub=XXXXXX' from origin 'http://localhost:7071' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I already tried some of the solutions

  1. LocalSetting.json
    "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
    }

  2. {
    "Values": {
    },
    "Host": {
    "CORS": "*"
    }
    }
    @ealsur @wely Can you please suggest what I am missing?
    thanks in advance

Successfully deployed but demo doesn't work

I've used the one click deploy and the resources have been successfully deployed in my subscription.
However when i launch the app and enter the chat, nothing happened.
I've ensured that i've filled the cosmosdb and signalr connection string though.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.