Jquery 使用Django Channel websocket更新Bokeh plot客户端中的数据

当通过使用Django通道实现的websocket接收到新数据时，我试图更新Django中的Bokeh图。其目的是流式传输通过websocket接收的新数据，而无需刷新浏览器

我的django视图创建的bokeh图是：

#in views.py
def sensor(request):
    plot = figure(title= 'title' ,
        x_axis_label= 'X-Axis',
        y_axis_label= 'Y-Axis',
        plot_width =900,
        plot_height =500

    source = ColumnDataSource(data=dict(x=[], y=[]))
    plot.line('x', 'y', source=source, legend= 'f(x)', line_width = 2)

    script, div = components(plot)

    return render(request,"sensor.html",{'div':div,'script':script})

与websocket关联的JQuery如下所示（我收到的消息是JSON格式的文本）：

我的问题是，我不知道如何通过JQuery更新Bokeh ColumnDataSource。我发现最接近的方法是使用Bokeh，但我看不到任何方法将它们与websocket onmessage事件连接起来，并访问通过该事件收集的数据

我尝试过的另一个选择是嵌入一个单独的，但我找不到使用Django Channel WebSocket更新绘图的方法。初始化绘图时，我还必须将数据从Django模型传递到Bokeh服务器，这很不方便

---

如能提供帮助/建议，将不胜感激。谢谢你

据我所知，你几乎是第一个提出或询问此事的人。恐怕目前没有一个好的答案给你。Bokeh协议定义明确且相互隔离，因此原则上可用于通过任何合适的信道进行通信，但目前使用它的只有：

• 标准默认的基于Tornado的Bokeh服务器，它创建并管理自己的websocket连接

• Jupyter扩展，使用Jupyter命令发送消息

使用Django通道意味着在Django之上重新实现当前Tornado Bokeh服务器的一些子集（或全部）。这也可能需要对BokeHJ本身进行更改。在任何情况下，这绝对是一个不平凡的领域，也就是说，我估计至少有几周的时间为一个已经有很多博克内部经验的人工作

我很乐意尝试讨论更多细节，特别是与您的用例相关的细节。您可能有简化的假设，使备选方案成为可能（例如，如果您只需要将数据推送到bokeh绘图，而不需要bokeh服务器提供的双向同步，那么您可能会想出自己的简单协议）。但是，这种迭代式的讨论比这样更好

---

[1] 最近，一位商业客户也询问了有关频道的问题，甚至可能会寻求获得资助的工作来增加此功能，但我无法推测何时或是否会发生这种情况。

据我所知，您几乎是第一个提出或询问此问题的人[1]。恐怕目前没有一个好的答案给你。Bokeh协议定义明确且相互隔离，因此原则上可用于通过任何合适的信道进行通信，但目前使用它的只有：

• 标准默认的基于Tornado的Bokeh服务器，它创建并管理自己的websocket连接

• Jupyter扩展，使用Jupyter命令发送消息

使用Django通道意味着在Django之上重新实现当前Tornado Bokeh服务器的一些子集（或全部）。这也可能需要对BokeHJ本身进行更改。在任何情况下，这绝对是一个不平凡的领域，也就是说，我估计至少有几周的时间为一个已经有很多博克内部经验的人工作

我很乐意尝试讨论更多细节，特别是与您的用例相关的细节。您可能有简化的假设，使备选方案成为可能（例如，如果您只需要将数据推送到bokeh绘图，而不需要bokeh服务器提供的双向同步，那么您可能会想出自己的简单协议）。但是，这种迭代式的讨论比这样更好

---

[1] 一位商业客户最近也询问了有关频道的问题，甚至可能会寻求获得资助的工作来增加这一功能，但我无法推测这将在何时或是否真的发生。

这很有帮助。谢谢我们需要通过WebSocket进行数据流传输，但考虑到Bokeh实现这一点的困难，在我们投入更多时间进行Bokeh可视化之前，最好先使用jquery插件进行可视化，如Chart.js或Google Charts。这会有所帮助。谢谢我们需要通过WebSocket进行数据流传输，但考虑到Bokeh实现这一点的困难，在我们投入更多时间进行Bokeh可视化之前，最好先使用jquery插件进行可视化，如Chart.js或Google Charts。

//In a script tag in sensor.html
$(function() {
  var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
  var endpoint = ws_scheme + '://' + window.location.host + window.location.pathname
  var ws = new WebSocket(endpoint);

  ws.onopen = function(e) {
         console.log("open", e);
  };

  ws.onmessage = function(e) {
      console.log("message", e);
      var new_data = jQuery.parseJSON(e.data).data);

      // UPDATE BOKEH ColumnDataSource WITH new_data 

  };
});