/vue-redis-websocket-notification

A repository for testing push notification service as part of VaaS's notification service proof-of-concept (PoC).

Primary LanguageJavaScriptMIT LicenseMIT

Push Notification using Vue.js, Redis and WebSocket

This small project allow you to push notification in a Vue application from a Redis PUBLISH using WebSockets.

notification-demo

Run the Application using Local Redis Server

Install Redis

Using Docker:

If you don't have Docker installed on your computer, you need to install it before you can continue. When you have Docker running, you can run this command to start the redis server:

docker run --name <CONTAINER_NAME> -p 6379:6379 -d redis

Using Homebrew (Mac):

To install:

brew install redis

To run:

redis-server

or

brew services start redis

Clone Project

> git clone https://github.com/mdrhmn/vue-redis-websocket-notification.git

> cd vue-redis-websocket-notification

Run the WebSocket Server

You can change the HTTP Port and the Redis connection string in the ./notif-server/server.js.

> cd ./notif-server

> npm install

> npm start server.js

Run the Vue Web-client application

> cd ./web-client

> npm install

> npm run serve

Open your browser to http://localhost:8080

Push notifications to the application

Open redis-cli in Terminal Redis Insight and publish messages on the app:notifications channel.

> redis-cli

127.0.0.1:6379> PUBLISH app:notifications "Hello from Redis!"
127.0.0.1:6379> PUBLISH app:notifications "Another message!"

You should see some notifications poping up in the Vue application.

Run the Application using Azure Cache for Redis

Create an Azure Cache for Redis cache instance

Refer to this official Microsoft documentation

Set up Environment Variables

Windows:

set REDISCACHEHOSTNAME=DNS_NAME.redis.cache.windows.net
set REDISCACHEKEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

MacOS:

export REDISCACHEHOSTNAME=DNS_NAME.redis.cache.windows.net
export REDISCACHEKEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Connect to Azure Cache for Redis server

Amend the Redis client connection in the notif-server/server.js file:

// notif-server/server.js

// METHOD 2: Using Azure Cache for Redis server
// Connect to the Azure Cache for Redis over the TLS port using the key.
var cacheHostName = process.env.REDISCACHEHOSTNAME;
var cachePassword = process.env.REDISCACHEKEY;
var redisClient = redis.createClient({
    // With Azure Cache for Redis, only the TLS port (6380) is enabled by default.
    // https://docs.microsoft.com/en-us/azure/azure-cache-for-redis/cache-how-to-redis-cli-tool
    url: "rediss://" + cacheHostName + ":6380",
    password: cachePassword,
});

/* -------------------------------------------------------------------------- */

// Subscribe to "app:notifications" channel
redisClient.subscribe("app:notifications");

Run the WebSocket Server

You can change the HTTP Port and the Redis connection string in the ./notif-server/server.js.

> cd ./notif-server

> npm install

> npm start server.js

Run the Vue Web-client application

> cd ./web-client

> npm install

> npm run serve

Open your browser to http://localhost:8080

Run the Vue Web-pub application

> cd ./web-pub

> npm install

> npm start

Send GET request to http://localhost:3015

Push notifications to the application

Unlike local Redis server connection, redis-cli doesn’t work with SSL connections. There are 3 ways to use redis-cli for Azure Cache for Redis server:

  1. Disable SSL-only configuration (not recommended due to security concerns)

  2. Connect using the Azure console

    img

    Open the console and publish messages on the app:notifications channel.

    > PUBLISH app:notifications "Hello from Redis!"
> PUBLISH app:notifications "Another message!"

    You should see some notifications poping up in the Vue application.

  3. Using stunnel to tunnel your redis connection over a TLS connection

    Refer to the Medium tutorial or official Microsoft documentation

References

  1. How to Create Notification Services with Redis, Websockets, and Vue.js
  2. Build a notification service with Redis, Web Sockets and Vue.js
  3. Quickstart: Use Azure Cache for Redis in Node.js
  4. Use the Redis command-line tool with Azure Cache for Redis
  5. Connecting to Azure Cache (Redis) with redis-cli and stunnel
  6. Implementing Redis Pub/Sub in Node.js Application