我如何在 chrome Extension(manifest V3) 的 Service Worker 中包含一个 socket.io-client

Question

我从cdn复制了客户端socket.io脚本，然后使用importScript，但是当我真正运行它时，它给出了

ReferenceError: document is not defined
at JSONPPolling.doPoll (socketio.js:3683)
at JSONPPolling.poll (socketio.js:4369)
at JSONPPolling.doOpen (socketio.js:4313)
at JSONPPolling.open (socketio.js:3399)
at Socket.open (socketio.js:2796)
at new Socket (socketio.js:2725)
at socketio.js:2560
at Manager.open (socketio.js:470)
at new Manager (socketio.js:383)
at lookup (socketio.js:220)

我该如何解决这个问题，我的服务工作者文件代码是

try {
importScripts('socket/socketio.js')


const socket = io("http://localhost:8080")


socket.on('connect', () => {
    console.log(socket.id)
})


} catch (e) {
console.log(e)
}

Answer 1

对我来说

{jsonp: false}

确实忽略了文档错误，但没有连接到我的服务器。

尝试使用

{ transports: ['websocket'] }

作为 socket.io 连接中的选项

service_worker.js

const socket = io('http://localhost:9000', { transports: ['websocket'] });

在我的节点服务器中

const io = require('socket.io')(server, {cors: '*'})

这对我有用！ ：）

Answer 2

您可以使用 webpack 将 socket.io 客户端捆绑到后台 Service Worker 中。

为了避免

wOxxOm

提到的document问题，您可以使用

jsonp: false

选项。

const socket = io('URL', {
  jsonp: false,
});

Answer 3

importScripts('https://cdn.socket.io/4.0.0/socket.io.min.js');

let socket;

self.addEventListener('message', (event) => {
  const { tenantId } = event.data;

  if (!socket) {
    // Connect to WebSocket server
   
    socket = io('http://localhost:5504', { transports: ['websocket'], jsonp: false });  // Use your WebSocket server URL

    // Join room with tenantId
    socket.emit('join', { tenantId });

    socket.on('join', (data) => {
      console.log('Joined room:', data.roomId);
    });

    // Listen for 'order-update' event
    socket.on('order-update', (order) => {

      // Post message to the client (React app)
      self.clients.matchAll().then((clients) => {
        clients.forEach((client) => {
          client.postMessage({ type: 'ORDER_UPDATE', order });
        });
      });
    });
  }
});

这对我有用