Code Monkey home page Code Monkey logo

serverless-websockets-quest's Introduction

Serverless Websockets Quest

Serverless websockets start screen

Description

This repository contains the code for the Serverless Websockets Quest, an ADND style multiplayer game concept that demonstrates how to use serverless websockets with Ably & Azure Functions.

The players trigger HTTP based serverless functions to play the game. The functions manage the global game state (stored as Durable Entities) and use Ably to send messages to the connected clients to update the local game state in realtime. The functions only publish messages, the players only subscribe to them.

Communication between player devices and the serverless application.

The game can be played online at quest.ably.dev. Read the full blog post here.

Tech Stack

  • Azure Functions, used as serverless compute to manage the game flow.
  • Ably, used as the serverless websockets to broadcast the game & player state to the clients in realtime.
  • VueJS, used as the front-end framework for the game.
  • Azure Static Web Apps, used as the hosting solution in the cloud.

Running locally

You require the following dependencies:

  • .NET 6. The .NET runtime required for the C# Azure Functions.
  • Node 16. The JavaScript runtime required for the Vue front-end.
  • Azure Functions Core Tools. This is part of the Azure Functions extensions for VSCode that should be recommended for automatic installation when this repo is opened in VSCode.
  • Azurite. This is an local storage emulator that is required for Entity Functions. When this repo is opened in VSCode a message will appear to install this extension.
  • Azure Static Web Apps CLI. Install this tool globally by running this command in the terminal: npm install -g @azure/static-web-apps-cli.
  • A free Ably Account, sign up or log in to ably.com, and create a new app and copy the API key.

Steps

  1. Clone this repo.
  2. Run npm install in the root folder.
  3. Rename the api\local.settings.json.example file to api\local.settings.json.
  4. Copy/paste the Ably API key in the ABLY_APIKEY field in the local.settings.json file.
  5. Start Azurite (VSCode: CTRL+SHIFT+P -> Azurite: Start)
  6. Run swa start in the root folder.
Open the browser and navigate to http://localhost:4280/.

You'll see this error message but you can ignore it as long as you're running the solution locally:

Function app contains non-HTTP triggered functions. Azure Static Web Apps managed functions only support HTTP functions. To use this function app with Static Web Apps, see 'Bring your own function app'.

The terminal will eventually output this message that indicates the emulated Static Web App is running:

Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.

Contributing

Want to help contributing to this project? Have a look at our contributing guide!

More info

For more questions or comments, please contact me on Twitter on our Ably Discord.


Ably logo

serverless-websockets-quest's People

Contributors

dependabot[bot] avatar marcduiker avatar thisisjofrank avatar

Watchers

 avatar

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.