Question

我正在运行一个Node JS Express应用程序。我正在尝试将Socket.io与服务器集成以在客户端上连接到它。

我的server.ts文件：

import express from "express";
import { createServer } from "http";
import { listen } from "socket.io";

import { DeckController } from "./controllers";

const app: express.Application = express();
const port: number = ((process.env.PORT as any) as number) || 3000;

const server = createServer(app);

const io = listen(server);

app.use(express.static("static"));

app.use("/deck", DeckController);

app.use(express.static(__dirname, { extensions: ["html"] }));

server.listen(port, () => {
  // tslint:disable-next-line:no-console
  console.log(`Listening at http://localhost:${port}/`);
});

io.on("connection", socket => {
  console.log("Client connected...");

  socket.on("join", data => {
    console.log(data);
  });
});

我正在使用webpack将文件捆绑在bundle.js中。我在前端使用点光源。

在我的Lit元素中，我通过以下方式导入Socket.io-client：

import io from "socket.io-client";

在connectedCallback中，运行：

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

  socket.on("connect", () => {
    socket.emit("join", "Hello World from client");
  });

似乎没有正确导入有关软件包的信息。好像在index.html中，我包含了socket.io.js脚本并运行了我在connectedCallback中运行的相同代码，客户端将连接到服务器。

<!DOCTYPE html>
<html>
  <head>
    <script src="./vendor/custom-elements-es5-adapter.js"></script>
    <script src="./vendor/webcomponents-bundle.js"></script>
    <script src="./vendor/socket.io.js"></script>
  </head>
  <body>
    <script src="bundle.js"></script>
    <script>
      var socket = io("http://localhost:3000");

      socket.on("connect", () => {
        socket.emit("join", "Hello World from client");
      });
    </script>
  </body>
</html>

我正在使用webpack复制NodeModules Socket Io文件。

我的Webpack.config.js文件：

const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
var nodeExternals = require("webpack-node-externals");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"]
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build")
  },
  target: "node",
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      },
      {
        from: path.resolve(
          "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
        ),
        to: path.resolve(__dirname, "build/vendor")
      },
      {
        from: path.resolve("node_modules/socket.io-client/dist/socket.io.js"),
        to: path.resolve(__dirname, "build/vendor")
      }
    ])
  ],
  externals: nodeExternals()
};

Answer 1

通过将目标从web更改为node

来解决

当使用Socket.io-client，Node JS express和Webpack时，浏览器中出现“未定义要求”错误

1 个答案: