I have an Node JS Express Application running. I am trying to integrate Socket.io with the server to connect to it on the Client.
My server.ts file:
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);
});
});
I am using webpack to bundle my files in bundle.js. I am using lit element for my front end.
Within my Lit element I am importing Socket.io-client via:
import io from "socket.io-client";
In the connectedCallback, running:
const socket = io("http://localhost:3000");
socket.on("connect", () => {
socket.emit("join", "Hello World from client");
});
It seems to not be importing something about the package correctly. As if in my index.html I include the socket.io.js script and run the same code that I run in my connectedCallback the client will connect to the server.
<!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>
I am copying the NodeModules Socket Io file using webpack.
My Webpack.config.js file:
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()
};
