在VUE中使用noVNC连接成功但没画面

问题遇到的现象和发生背景

为了在VUE项目中实现远程桌面，我引入了noVNC包，并按照配置去连接一个docker容器中的noVNC服务。通过noVNC包中的RFB类配置完成后，VUE网页和noVNC容器服务器都显示连接成功，但是远程画面并没有反显，画面没有任何反应。
当直接使用容器中noVNC提供的html时一切正常可以操控桌面，但加入到VUE中就只连接成功但没有反应没有页面。

VUE相关代码

<template>
  <div style="background: #2c3e50">
    <canvas id="screen" width="1000" height="600" style="background: white">
    </canvas>
  </div>
</template>

<script>
import RFB from '@novnc/novnc/core/rfb';

export default {
  data() {
    return {
      rfb: null,
      url: 'ws://localhost:8082', //链接的url
    }
  },
  mounted() {
    //这时已经可以获取到dom元素
    this.connectVnc();
  },
  methods: {
    // vnc连接断开的回调函数
    disconnectedFromServer(msg) {
      if (msg.detail.clean) {
        // 根据 断开信息的msg.detail.clean 来判断是否可以重新连接
        this.connectVnc()
      } else {
        //这里做不可重新连接的一些操作
      }
    },
    // 连接成功的回调函数
    connectedToServer(msg) {
      console.log('noVNC connect success', msg)
    },
    connectVnc() {
      const PASSWORD = '123456';
      let rfb = new RFB(document.getElementById('screen'), this.url, {
        // 向vnc 传递的一些参数，比如说虚拟机的开机密码等
        credentials: {password: PASSWORD},
      });
      rfb.addEventListener('connect', this.connectedToServer);
      rfb.addEventListener('disconnect', this.disconnectedFromServer);
      rfb.scaleViewport = true;  //scaleViewport指示是否应在本地扩展远程会话以使其适合其容器。禁用时，如果远程会话小于其容器，则它将居中，或者根据clipViewport它是否更大来处理。默认情况下禁用。
      rfb.resizeSession = true; //是一个boolean指示是否每当容器改变尺寸应被发送到调整远程会话的请求。默认情况下禁用

      this.rfb = rfb;
    }
  },
}
</script>

运行结果及报错内容

从控制台中可以看到noVNC连接成功

我的解答思路和尝试过的方法

因为VUE项目是通过编译器在我的电脑上（宿主机器）直接运行的，而noVNC桌面是在docker里，所以我试着把web部署到docker另一个容器中，但是显示ws连接失败，可能是Nginx服务器不支持websocket协议？目前也没解决
我的noVNC服务是在一个Ubuntu容器中，先开启了vnc4server，然后用noVNC把vnc4server暴露到localhost中。
求解答，感激不尽

是Nginx服务器不支持websocket协议 不能把

http://nginx.org/en/docs/http/websocket.html

把canvas改成div