CODEWITHSUNDEEP
pythonflask
dropWizard
dropWizard

Reputation: 3538

Creating a webhook in Flask

I have a chrome extension ingesting data from various web pages I visit and storing it to a database (Python/Flask)

I also have a dashboard visualizing that database (using react-create-app node/react/redux).

I want the dashboard to be automatically updated every time I add/delete/modify a record in the database.

From what I understand that is specifically what a webhook is for.

What I want to do is create a "listener" on the database so that every time a change is made, it will fire off a request to the node server.

A few things: 1.) How do I create "something" to listen for changes in a database? 2.) Normally my webpage initiates a web request and listens for data in the call back. How do I structure it so it just "listens" for new updates?

Upvotes: 1

Views: 2853

Answers (2)

Remco
Remco

Reputation: 435

When you request a page from the node server on every request you receive in the flask app that handles CRUD changes you effectively created a web hook (one server requesting or posting another). You may want to offload this to a background thread or job system, like beanstalkd. Giving you asynchronous webhook calls. If you want the page you monitor to also update you might be interested in web sockets.

Upvotes: 1

alexanderbird
alexanderbird

Reputation: 4198

It sounds to me like this is what you're looking for:

+- Browser --------+    +---- Browser ---------------+
| Chrome extension |    |    React dashboard         |
+---+--------------+    +-+----+----------------+----+
    |                     |    ^                |
    |                     |    |                |
[C] +         [B]+--------+    |            [A] |
   POST       open a           |  [D]          GET
  (http)      websocket     send websocket    (http)
    |            |      +---message             |
    v            |      |                       v
+-- Server A +---------------+     + Server B --+----+
|                v      |    |     |                 |
| +--------------+------+-+  |     |  +-----------+  |
| | Flask                 |  |     |  |  Node     |  |
| +-----------------------+  |     |  | (hosting  |  |
| +-----------------------+  |     |  |   React)  |  |
| | DB                    |  |     |  +-----------+  |
| +-----------------------+  |     |                 |
+----------------------------+     +-----------------+
  • [A] From your web browser, you load your React dashboard from your node server
  • [B] Your react app opens a websocket connection to your python server when it initializes. A websocket allows two way communication between a browser client and a server - see details below.
  • [C] Some time later, in your browser, your chrome extension makes an http call to your python server, which updates the database
  • [D] Your python server, after updating the database, sends a websocket message to your react app using the websocket connection that it already established. Your react app then updates the dashboard with the latest data sent via websocket.

Websockets

Websockets is a protocol that allows two way communication between a server and a browser client.

You'll Need To:

  1. Update your react app so it creates a websocket connection and listens for update messages. There's an npm package for that, but I've never used it before.
  2. Update your python server to accept websocket connections and send websocket messages for every update. There's a python package for flask that implements websockets - I've used this one a few years ago for a school project and it did the trick.

By the way: You don't need two servers for this. Your node server can handle the database saves, or your python/flask server could serve the React app.

Upvotes: 2

Related Questions