Interactive plot using WebAgg backend does not work with Django Channels

I am trying to convert the Embedding WebAgg script to a Django web app. The plot is displayed but interactive features are not working. For example, when I click the Zoom button I get this error:

in receive
  File "/Users/ils475/.pyenv/versions/mpl/lib/python3.10/site-packages/matplotlib/backends/", line 464, in handle_json
  File "/Users/ils475/.pyenv/versions/mpl/lib/python3.10/site-packages/matplotlib/backends/", line 264, in handle_event
    return handler(event)
  File "/Users/ils475/.pyenv/versions/mpl/lib/python3.10/site-packages/matplotlib/backends/", line 319, in handle_toolbar_button
    getattr(self.toolbar, event['name'])()
AttributeError: 'NoneType' object has no attribute 'zoom'

Also, there are no X and Y coordinate values displayed under the plot when mouse is hovering over it.


import json

from django.core.cache import cache

from channels.generic.websocket import WebsocketConsumer

class WebSocketConsumer(WebsocketConsumer):
    def connect(self):
        self.manager = cache.get("figure_manager")

    def disconnect(self, close_code):

    def receive(self, text_data=None, bytes_data=None):
        message = json.loads(text_data)

    def send_json(self, content):

    def send_binary(self, blob):

import mimetypes
import io

from django.core.cache import cache
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.http import require_GET

from matplotlib.backends.backend_webagg_core import (
    FigureManagerWebAgg, new_figure_manager_given_figure)
from matplotlib.figure import Figure
import numpy as np

def create_figure():
    Creates a simple example figure.
    fig = Figure()
    ax = fig.add_subplot()
    t = np.arange(0.0, 3.0, 0.01)
    s = np.sin(2 * np.pi * t)
    ax.plot(t, s)
    return fig

def index(request):
    figure = create_figure()
    manager = new_figure_manager_given_figure(id(figure), figure)
    cache.set('figure_manager', manager)
    ws_uri = f"ws://{request.get_host()}/"
    return render(request, 'websocket.html',
                  {"ws_uri": ws_uri, "fig_id": manager.num})

def mpl_js(request):
    response = HttpResponse(content_type='application/javascript')
    return response

def download(request, fmt):
    manager = cache.get("figure_manager")
    response = HttpResponse(content_type=mimetypes.types_map.get(fmt, 'binary'))
    buff = io.BytesIO()
    manager.canvas.figure.savefig(buff, format=fmt)
    return response

from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws$', consumers.WebSocketConsumer.as_asgi()),

Any ideas?