Bokeh (pronounced as boh-kay) is a powerful Python library for creating interactive visualizations and data dashboards. It provides several methods to interact with data and display it in a web browser. One of the advanced features of Bokeh is its ability to integrate with websockets, allowing real-time updates to be pushed to the browser.

In this blog post, we will explore how to integrate Bokeh with websockets in Python to create dynamic and interactive visualizations.

What are websockets?

Websockets are a communication protocol that provides full-duplex communication channels over a single TCP connection. Unlike traditional HTTP connections, websockets allow both the client and server to send messages to each other asynchronously. This makes websockets ideal for real-time applications where data needs to be continuously updated.

Setting up the project

Before we dive into the integration, let’s set up a basic project structure. We’ll assume that you have Python and Bokeh already installed on your system.

1. Create a new Python virtual environment:

   $ python -m venv bokeh-websocket-integration
   

2. Activate the virtual environment:
   • For Windows:

     $ bokeh-websocket-integration\Scripts\activate.bat
     

   • For macOS/Linux:

     $ source bokeh-websocket-integration/bin/activate
     

3. Install the required packages:

   $ pip install bokeh==2.4.1
   $ pip install tornado==6.1
   

4. Create a new Python file named app.py to start our Bokeh application.

Creating a Bokeh application with websockets

Now, let’s create a simple Bokeh application that uses websockets to update the visualization in real-time.

First, we’ll import the necessary modules:

from bokeh.io import curdoc
from bokeh.layouts import column
from bokeh.models import ColumnDataSource
from bokeh.plotting import figure
from tornado.websocket import websocket_connect

Next, we can define our WebSocket connection and set up the Bokeh application:

# Connect to the websocket server
websocket_url = "ws://localhost:8000/ws"
websocket = await websocket_connect(websocket_url)

# Create a Bokeh plot
source = ColumnDataSource(data=dict(x=[], y=[]))
plot = figure()
plot.circle(x='x', y='y', source=source)

# Update the Bokeh plot with new data from the websocket
def update_data(data):
    source.stream(data, 100)

async def websocket_handler():
    while True:
        message = await websocket.read_message()
        # Parse the message and update the plot
        update_data(message)

# Run the Bokeh application
curdoc().add_root(column(plot))
curdoc().add_periodic_callback(websocket_handler, 100)

Here, we first establish a connection to the websocket server using the websocket_connect function from the tornado.websocket module. We then create a Bokeh plot using the figure function and a ColumnDataSource to hold the data.

The update_data function is responsible for updating the plot with new data received from the websocket. It uses the stream method of the ColumnDataSource to add the new data points to the plot.

Finally, we define a websocket_handler function that continuously reads messages from the websocket, parses them, and updates the plot using the update_data function. We use the add_periodic_callback method of the Bokeh curdoc object to repeatedly call the websocket_handler every 100 milliseconds, ensuring that the plot is updated in real-time.

Running the Bokeh application

To run the Bokeh application, open a terminal and navigate to the project directory. Then, execute the following command:

$ bokeh serve --show app.py

This will start the Bokeh server and open a web browser window with the visualization. Any updates received from the websocket server will be reflected in the plot in real-time.

Conclusion

In this blog post, we explored how to integrate Bokeh with websockets in Python to create dynamic and interactive visualizations. With the ability to push real-time updates to the browser, you can build powerful applications that respond to changes in data instantly.

By combining the power of Bokeh and websockets, you can create engaging and interactive data dashboards, real-time monitoring systems, and much more. The possibilities are endless!

Happy coding with Bokeh and websockets!