Skip to main content

如何与 NW.js 一起使用

¥How to use with NW.js

本指南展示了如何在 NW.js（以前称为 node-webkit）应用中使用 Socket.IO。

¥This guide shows how to use Socket.IO within a NW.js (previously known as node-webkit) application.

用法​

¥Usage

默认情况下，NW.js 创建两个不同的 JavaScript 上下文：

¥By default, NW.js creates two different JavaScript contexts:

  • 浏览器上下文，可以访问 网络应用接口（每个窗口/框架一个上下文）

    ¥a browser context, which has access to the Web API (one context per window/frame)

  • 节点上下文，可以访问 Node.js API（在所有窗口/框架之间共享）

    ¥a Node context, which has access to the Node.js API (shared between all windows/frames)

参考：https://nwjs.readthedocs.io/en/latest/For%20Users/Advanced/JavaScript%20Contexts%20in%20NW.js/

¥Reference: https://nwjs.readthedocs.io/en/latest/For%20Users/Advanced/JavaScript%20Contexts%20in%20NW.js/

Socket.IO 客户端可以在这两种上下文中创建，具体取决于你的用例。

¥The Socket.IO client can be created in both context, depending on your use case.

浏览器上下文​

¥Browser context

index.html
<!doctype html>
<html lang="en">
  <body>
    <p>Status: <span id="status"></span></p>
    <p>Transport: <span id="transport"></span></p>

    <!-- from the socket.io-client package -->
    <script src="./node_modules/socket.io-client/dist/socket.io.min.js"></script>

    <!-- or from a CDN -->
    <!--<script src="https://cdn.socket.io/4.7.5/socket.io.js"></script>-->

    <script>
      const socket = io("http://localhost:3000");

      const statusSpan = document.getElementById("status");
      const transportSpan = document.getElementById("transport");

      statusSpan.innerText = "Disconnected";
      transportSpan.innerText = "N/A";

      socket.on("connect", () => {
        statusSpan.innerText = "Connected";
        transportSpan.innerText = socket.io.engine.transport.name;
        socket.io.engine.on("upgrade", (transport) => {
          transportSpan.innerText = transport.name;
        });
        console.log(`connect ${socket.id}`);
      });

      socket.on("connect_error", (err) => {
        console.log(`connect_error due to ${err.message}`);
      });

      socket.on("disconnect", (reason) => {
        statusSpan.innerText = "Disconnected";
        transportSpan.innerText = "N/A";
        console.log(`disconnect due to ${reason}`);
      });

      socket.emit("hello", "world");
    </script>
  </body>
</html>

在这种情况下，Socket.IO 客户端将使用浏览器提供的 WebSocket 对象。

¥In that case, the Socket.IO client will use the WebSocket object provided by the browser.

优点​

¥Pros

  • 可以在 DevTools 中调试 Socket.IO 连接：

    ¥the Socket.IO connection can be debugged in the DevTools:

DevTools with NW.js

缺点​

¥Cons

  • 仅使用 WebSocket 时，extraHeaders 选项将被忽略：

    ¥the extraHeaders option will be ignored when using WebSocket only:

const socket = io("http://localhost:3000", {
  transports: ["websocket"],
  extraHeaders: {
    "my-custom-header": "1234" // ignored
  }
});

节点上下文​

¥Node context

index.html
<!doctype html>
<html lang="en">
  <body>
    <p>Status: <span id="status"></span></p>
    <p>Transport: <span id="transport"></span></p>

    <script>
      const statusSpan = document.getElementById("status");
      const transportSpan = document.getElementById("transport");

      const { registerListeners, emit } = require("./socket");

      registerListeners({ statusSpan, transportSpan });

      emit("hello", "world");
    </script>
  </body>
</html>
socket.js
const { io } = require("socket.io-client");

const socket = io("http://localhost:3000");

exports.registerListeners = function ({ statusSpan, transportSpan }) {
  statusSpan.innerText = "Disconnected";
  transportSpan.innerText = "N/A";

  function onConnect() {
    statusSpan.innerText = "Connected";
    transportSpan.innerText = socket.io.engine.transport.name;
    socket.io.engine.on("upgrade", (transport) => {
      transportSpan.innerText = transport.name;
    });
    console.log(`connect ${socket.id}`);
  }

  if (socket.connected) {
    onConnect();
  }

  socket.on("connect", onConnect);

  socket.on("connect_error", (err) => {
    console.log(`connect_error due to ${err.message}`);
  });

  socket.on("disconnect", (reason) => {
    statusSpan.innerText = "Disconnected";
    transportSpan.innerText = "N/A";
    console.log(`disconnect due to ${reason}`);
  });
}

exports.emit = function (...args) {
  socket.emit(...args);
}

在这种情况下，Socket.IO 客户端将使用 ws 包提供的 WebSocket 对象。

¥In that case, the Socket.IO client will use the WebSocket object provided by the ws package.

优点​

¥Pros

  • Socket.IO 连接将在应用的不同窗口之间共享

    ¥the Socket.IO connection will be shared between the different windows of your application

  • 客户端支持特定于 Node.js 的其他选项，例如 agent、ca 或 cert

    ¥the client supports additional options specific to Node.js such as agent, ca or cert

const socket = io("https://localhost:3000", {
  ca: fs.readFileSync("cert.pem")
});

  • 仅当使用 WebSocket 时，extraHeaders 选项才会正确发送：

    ¥the extraHeaders option will properly be sent when using WebSocket only:

const socket = io("http://localhost:3000", {
  transports: ["websocket"],
  extraHeaders: {
    "my-custom-header": "1234"
  }
});

缺点​

¥Cons

  • 无法在 DevTools 中调试 Socket.IO 连接（即使选择 "检查背景页"）

    ¥the Socket.IO connection cannot be debugged in the DevTools (even when choosing "Inspect Background Page")

示例项目​

¥Sample project

https://github.com/socketio/socket.io/tree/main/examples/nwjs-example

以上就是全部内容了，感谢大家的阅读！

¥That's all folks, thanks for reading!

返回示例列表

¥Back to the list of examples