带有Webpack的服务器/客户端应用程序+socket.io

yhuiod9q 于 2023-03-08 发布在 Webpack

关注(0)|答案(2)|浏览(184)

我正在开发一个前端与后端通过www.example.com进行通信的应用程序socket.io
现在我把它们放在两个独立的应用程序中，如下所示：

.
├──client
│  ├──src
│  │  └──index.js
│  ├──public 
│  │  └──index.html
│  ├──webpack.config.js
│  └──package.json
└──server
   ├──app.js
   └──package.json

./服务器/应用程序. js如下所示

const Express = require('express')();
const server = require('http').Server(Express);
const options = {
    cors: {
        origin: 'http://localhost:8080',
        methods: ['GET','POST'],
        credentials: true,
    },
};
const Socketio = require('socket.io')(server, options);

Socketio.on('connection', socket => {
    socket.on('do-something', () => {
        console.log('doing something...');
    });

});

server.listen(3000, () => {
    console.log('listening on port 3000');
});

./客户端/源代码/索引. js包含以下代码行

const io = require('socket.io-client');
const socket = io('http://localhost:3000');

const someFunction = () => {
    socket.emit('do-something');
}

相当标准的东西。
现在我分别在两个终端窗口运行它们。所以基本上我有两个服务器服务于一个应用程序。这似乎不是正确的方式，所以我想尝试将它们合并成一个单独的webpack应用程序来部署。我该怎么做呢？在现实世界中你该怎么设置这种东西？
我试着在谷歌上搜索这个主题，但什么也没找到。如果你知道有一篇文章清楚地解释了这一点，请分享链接。

webpack

来源：https://stackoverflow.com/questions/68806912/server-client-app-with-webpack-socket-io

2条答案

按热度按时间

eh57zj3b1#

我建议：
1.将webpack.config.js和package.json放在项目的根目录下。
1.在./server中，区分app.js（导出快速应用程序）和server.js（在端口侦听）。
1.使用npm-run-all简化您的package.json脚本（提供命令run-p和run-s）
1.在项目的根目录中添加一个生产./server.js。
./package.json

"scripts": {
    "dev": "run-p dev:*",
    "dev:server": "nodemon ./server/server.js",
    "dev:webpack": "webpack serve",
    "build:webpack": "webpack",
    "serve": "node ./server.js"
  }

./server/app.js

const Express = require('express')();
const app = require('http').Server(Express);

// Your app definition (socket.io, etc) ...

module.exports = app

./server/server.js

// Your api dev server

const app = require('./app')

app.listen(3000, () => {
    console.log('Dev server listening on port 3000');
});

./server.js

// Your prod server

const express = require('express')
const app = require('./server/app')

// Same of your api dev server, but your also serve your frontend build
// ./dist depends on webpack "output-path" parameter
app.use(express.static('./dist')) 

app.listen(3000, () => {
    console.log('Prod server listening on port 3000');
});

现在，您可以：
并行运行前端和后端

npm run dev

仅运行前端

npm run dev:webpack

仅运行后端

npm run dev:server

构建前端

npm run build:webpack

为生产中的后端和前端提供服务（我建议使用pm2）

npm run serve

这个体系结构在我的项目中工作得很好。你可以很容易地扩展它来使用typescript，例如...😊. You can easily extend it to use Typescript for example...
抱歉，我的英语太肤浅了。
我没有测试所提供的代码，如果有任何错误，对不起.
问候

赞(0）回复(0）举报 2023-03-08

zsbz8rwp2#

好吧，我放弃。我来回答。
现在，合并这两个repos看起来很诱人，因为您使用的是相同的语言，并且客户机和服务器可能有一些相同的依赖项。
但是当

你的老板说你必须把服务器部分移植到Python/Java/Go/什么的，原因是什么？
您想将客户端或服务器移交给另一个团队吗？
你想开源客户端，但现在git历史记录中有你所有的（仍然是专有的）服务器代码？
您添加了一个CI/CD工作流，现在向客户端提交启动了服务器的管道，反之亦然？

注：这不是假设，我实际上看到了大多数这样的事情发生。现在，你可能对所有这些问题都有很好的答案，并决定无论如何都要去做，但如果你不这样做，那就随它去吧：将客户机和服务器捆绑在同一个回购协议中会使您失去很多灵活性，而收益却非常小。

赞(0）回复(0）举报 2023-03-08

我来回答

带有Webpack的服务器/客户端应用程序+socket.io

2条答案

相关问题

热门标签

最新问答