forked from confluentinc/demo-scene
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added a websockets application to view the POOR_RATINGS topic
- Loading branch information
Showing
11 changed files
with
277 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| server { | ||
| listen 8080 default_server; | ||
| server_tokens off; | ||
|
|
||
| location / { | ||
| proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; | ||
| proxy_set_header Host $host; | ||
|
|
||
| proxy_pass http://websockets:3000; | ||
|
|
||
| # enable WebSockets | ||
| proxy_http_version 1.1; | ||
| proxy_set_header Upgrade $http_upgrade; | ||
| proxy_set_header Connection "upgrade"; | ||
| } | ||
|
|
||
| error_page 500 502 503 504 /50x.html; | ||
| location = /50x.html { | ||
| root /usr/share/nginx/html; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| FROM node:dubnium-stretch | ||
| RUN mkdir -p /home/node/app/node_modules && \ | ||
| chown -R node:node /home/node/app && \ | ||
| apt-get update && \ | ||
| apt-get install -y kafkacat | ||
| WORKDIR /home/node/app | ||
| COPY package*.json ./ | ||
| USER node | ||
| RUN npm install | ||
| COPY --chown=node:node . . | ||
| EXPOSE 3000 | ||
| CMD [ "bash", "start.sh" ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Cobbled together with code samples from: | ||
|
|
||
| * [socket.io](https://github.com/socketio/socket.io) for websocket comms between Kafka client and web browser. | ||
| * [kafka-avro](https://github.com/waldophotos/kafka-avro) for a Kafka client with Schema Registry support. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| // initialize kafka avro client | ||
| var KafkaAvro = require('kafka-avro'); | ||
| var kafkaAvro = new KafkaAvro({ | ||
| kafkaBroker: 'kafka:29092', | ||
| schemaRegistry: 'http://schema-registry:8081', | ||
| }); | ||
| kafkaAvro.init() | ||
| .then(function() { | ||
| console.log('Ready to use'); | ||
| }); | ||
|
|
||
| // Setup basic express server | ||
| var express = require('express'); | ||
| var app = express(); | ||
| var path = require('path'); | ||
| var server = require('http').createServer(app); | ||
| var io = require ('socket.io') (server); | ||
| var port = process.env.PORT || 3000; | ||
|
|
||
| server.listen(port, () => { | ||
| console.log('Server listening at port %d', port); | ||
| }); | ||
|
|
||
| // Routing | ||
| app.use(express.static(path.join(__dirname, 'public'))); | ||
|
|
||
| // log when we get a websocket connection | ||
| io.on('connection', (socket) => { | ||
| console.log('new connection, socket.id: ' + socket.id); | ||
| }); | ||
|
|
||
| // single avro consumer | ||
| kafkaAvro.getConsumer({ | ||
| 'group.id': "server1", | ||
| 'socket.keepalive.enable': true, | ||
| 'enable.auto.commit': false, | ||
| }) | ||
| .then(function(consumer) { | ||
| return new Promise(function (resolve, reject) { | ||
| consumer.on('ready', function() { | ||
| resolve(consumer); | ||
| }); | ||
| consumer.connect({}, function(err) { | ||
| if (err) { | ||
| reject(err); | ||
| return; | ||
| } | ||
| resolve(consumer); | ||
| }); | ||
| }); | ||
| }) | ||
| .then(function(consumer) { | ||
| // Subscribe to POOR_RATINGS | ||
| var topicName = 'POOR_RATINGS'; | ||
| consumer.subscribe([topicName]); | ||
| consumer.consume(); | ||
| consumer.on('data', function(rawData) { | ||
| // send the message to all the listeners | ||
| console.log("."); | ||
| io.sockets.emit('new message', rawData.parsed); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| { | ||
| "name": "ratings-websockets", | ||
| "version": "0.0.1", | ||
| "description": "Websockets for ksql-workshop", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "start": "node index.js" | ||
| }, | ||
| "author": "[email protected]", | ||
| "license": "ISC", | ||
| "dependencies": { | ||
| "express": "^4.17.1", | ||
| "kafka-avro": "^1.2.0", | ||
| "socket.io": "^2.2.0" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <title>Poor Ratings</title> | ||
| <style> | ||
| body { | ||
| font-family: 'Roboto', sans-serif; | ||
| } | ||
|
|
||
| .speech-bubble { | ||
| position: relative; | ||
| background: #ddddff; | ||
| border-radius: .4em; | ||
| padding: 10px; | ||
| margin: 10px; | ||
| } | ||
|
|
||
| .speech-bubble:after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 10px; | ||
| top: 50%; | ||
| width: 0; | ||
| height: 0; | ||
| border: 20px solid transparent; | ||
| border-right-color: #ddddff; | ||
| border-left: 0; | ||
| border-bottom: 0; | ||
| margin-top: -10px; | ||
| margin-left: -20px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h2>Poor Ratings</h2> | ||
| <div id='main'> | ||
| </div> | ||
|
|
||
| <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> | ||
| <script src="/socket.io/socket.io.js"></script> | ||
| <script> | ||
| $(function(){ | ||
|
|
||
| const socket = io({ | ||
| transports: ['websocket'] | ||
| }); | ||
|
|
||
| socket.on('new message', (data) => { | ||
| var bubble = $("<div>", { | ||
| 'class': "speech-bubble", | ||
| }); | ||
| bubble.append(data.message.string); | ||
| for (var i=0; i<data.stars.int; i++) | ||
| bubble.append('⭐️'); | ||
| $('#main').append(bubble); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| #!/usr/bin/env bash | ||
| until kafkacat -b kafka:29092 -L | grep POOR_RATINGS | ||
| do | ||
| sleep 1 | ||
| done | ||
| npm start |