无法获取工作脚本。 VueJS 应用程序答案

【问题标题】：Failed to fetch a worker script. VueJS application无法获取工作脚本。 VueJS 应用程序
【发布时间】：2022-10-17 05:33:51
【问题描述】：

我一直在尝试在 Vue 应用程序中使用 SharedWorker，但遇到了错误“获取工作脚本失败”。

我想使用 SharedWorker 来获取消息并将其发布到 WebSocket。

socketworker.js

const API_KEY =
  "<my api key>";
const socket = new WebSocket(
  `wss://streamer.cryptocompare.com/v2?api_key=${API_KEY}`
);

self.onconnect = e => {
  const port = e.ports[0];

  socket.addEventListener("message", evt => {
    if (evt.data) {
      port.postMessage(evt.data);
      return;
    }
  });
};

self.onmessage = e => {
  message = e.data;

  socket.send(message);
};

api.js

const socketWorker = new SharedWorker("./workers/socketworker.js", {
  type: "module",
  name: "socketWorker"
});

socketWorker.port.onmessage = e => {
 ...
}

【问题讨论】：

你在用Vite吗？完整的错误信息是什么？是404吗？如果是这样，则该文件可能在 api.js 的路径中不存在（即 URL 可能错误）。
不，我不使用 Vite。控制台中的完整错误消息是“无法获取工作脚本”。就这样。在网络选项卡中，工作文件的状态为挂起。

标签： javascript vue.js shared-worker

【解决方案1】：

我在 Vue SPA 项目中遇到了同样的问题，并使用“tabex”库解决了（https://github.com/nodeca/tabex）

此库根据所有选项卡的 localStorage 更改发出事件

这个库可以控制哪个是“主”选项卡，因此，您只能在主选项卡上连接到 websocket，并通过 tabex 将事件发送到所有选项卡。

// tabex-impl.ts

// @ts-nocheck
import * as tabex from 'tabex'
import {MasterTab} from "@/MasterTab";

window.tabex = tabex
window.tabex.router({
    // origin: [ '*://*.yourdomain.com', '*://yourdomain.com' ]
    origin: [ '*' ]
});

var live = window.tabex.client();

window.tabexLive = live

window.tabexLive.on('channel.name', function handler(message) {
    // Do something
    alert('do something!')
});

// Connect to messaging server when become master and
// kill connection if master changed
live.on('!sys.master', function (data) {
    console.log('!sys.master')
    console.log(data)

    if (data.node_id === data.master_id) {
        console.warn("I'm the master!")
        new MasterTab();
    }
});

MasterTab 控制来自 websocket 的消息并通过 tabex 抛出

import store from "@/store";
import {AuthUserEntity} from "@/domain/entities/auth-user.entity";

export class MasterTab {
    private authEntity: AuthUserEntity;
    private socketConnection: WebSocket;

    constructor() {
        // only logged user can connect
        if(store.state.authEntity.user.id){
            this.authEntity = store.state.authEntity;
            if (!this.socketConnection) {
                this.socketConnect();
            }
        }
    }

    private socketConnect() {
        // const socket = new ClientSocket()
        const ws = new WebSocket('ws://localhost:9001')

        ws.onopen = () => {
            this.socketConnection = ws;
            this.setupSocket();
        }
    }

    private setupSocket() {
        this.socketConnection.onmessage = (message) => {
            console.warn('received message from socket!!!')
            //@ts-ignore
            window.tabexLive.emit('channel.name', 'message!', true);
        }
    }
}

【讨论】：