Helpex - Trao đổi & giúp đỡ
Đăng nhập
21

Tôi có một máy chủ Koa sử dụng webpack-dev-middleware và webpack-hot-middleware đang thực hiện thay thế mô-đun nóng (HMR), vì vậy phần mềm trung gian sử dụng websocket để đẩy các thay đổi cho máy khách.

Nhưng mã ứng dụng của tôi cũng cần kết nối websocket riêng giữa máy khách và máy chủ Koa. Tôi không biết làm thế nào để đạt được điều đó? Có vẻ như cả hai đang mâu thuẫn. Tôi có thể để chúng ở cạnh nhau không?

Mã máy chủ của tôi trông giống như thế này

const compiler = webpack(webpackConfig)
const app = new Koa()

app.use(webpackDevMiddleware(compiler, {
  quiet: true,
  noInfo: true
  stats: {
    colors: true,
    reasons: true
  }
})))

app.use(webpackHotMiddleware(compiler))

const server = require('http').createServer(app.callback())
const io = require('socket.io')(server)
io.on('connection', function() { console.log('socket connection!!') })

Và khách hàng của tôi một cái gì đó như

import Client from 'socket.io-client'
const io = Client()
io.on('connection', (socket) => {
  console.log('+++ io connected! ++++')
  io.on('disconnect', () => { console.log('disconnected', socket) })
})

Ổ cắm HMR đang hoạt động bình thường, nhưng ổ cắm còn lại đang cố kết nối GET /socket.io/?EIO=3&transport=polling&t=1446911862461-0và những yêu cầu đó không thành công.

Làm cách nào để tạo một websocket không xung đột với ổ cắm HMR?

21 hữu ích 1 bình luận 9.1k xem chia sẻ
1 trả lời 1
Viết câu trả lời
12

Đây là những gì đã hiệu quả với tôi trong một ứng dụng mà tôi đang làm việc mà tôi đang sử dụng webpack hot reloading + socket.io trên cùng một máy chủ express.

Bổ sung cho package.json:

"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0"

Trong pluginsphần cấu hình gói web của bạn:

plugins: [
   new webpack.optimize.OccurenceOrderPlugin(),
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoErrorsPlugin(),
],

Thiết lập cho ứng dụng express:

const http = require('http');
const express = require('express');

const webpack = require('webpack');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

// Create the app, setup the webpack middleware
const app = express();
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true,
  publicPath: webpackConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(compiler));

// You probably have other paths here
app.use(express.static('dist'));

const server = new http.Server(app);
const io = require('socket.io')(server);

const PORT = process.env.PORT || 8090;

server.listen(PORT);

io.on('connection', (socket) => {
  // <insert relevant code here>
  socket.emit('mappy:playerbatch', playerbatch);
});

Tôi đã đăng tiền thưởng cho câu hỏi này để giúp câu hỏi này được trả lời, mặc dù tôi đã nhận được nó hoạt động cho ứng dụng của riêng tôi.

12 hữu ích 3 bình luận chia sẻ
loading

Đăng nhập để trả lời câu hỏi

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ node.js express socket.io webpack koa , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading
Hoạt động
Liên quan
Mới tạo