Я пытаюсь подключиться к серверу Socket.IO с освещенного элемента.Когда я делаю это, я получаю сообщение об ошибке в своем браузере Uncaught ReferenceError: require is not defined
Я использую WebPack с загрузчиком Typescript.Предупреждения о возврате через веб-пакет
WARNING in ./node_modules/engine.io-client/node_modules/ws/lib/validation.js
Module not found: Error: Can't resolve 'utf-8-validate' in '\node_modules\engine.io-client\node_modules\ws\lib'
и
WARNING in ./node_modules/engine.io-client/node_modules/ws/lib/buffer-util.js
Module not found: Error: Can't resolve 'bufferutil' in '\node_modules\engine.io-client\node_modules\ws\lib'
Я пытался поместить bufferuntil и utf-8-validate в мои исключения из файла webpack.config.js.
Iя могу подключиться к клиенту, включив socket.io.js в мой html-файл и запустив код подключения в коде сценария
<!DOCTYPE html>
<html>
<head>
<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>
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, { serveClient: false });
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);
});
});
connectedCallbackмоего LitElement
import io from "socket.io-client"; //Not in my connectedCallback, top of file
const socket = io("http://localhost:3000");
socket.on("connect", () => {
socket.emit("join", "Hello World from client");
});
webpack.config.js
const path = require("path");
const CopyWebpackPlugin = require("copy-webpack-plugin");
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")
}
])
]
};