У меня запущено приложение 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);
});
});
Я использую веб-пакет, чтобы связать мои файлы в комплект.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>
Я копирую файл Sode Io NodeModulesиспользуя webpack.
Мой файл 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()
};