I prepared this minimum repo: https://github.com/lucasscheuvens/socket-problem.git
I have a node.js express
server that is supposed to run under the same port as socket.io
.
This is my server-side code:
(async function() {
'use strict';
// environment variables
const PORT = 8888
// npm packages
const express = require('express')
const app = express()
const server = require('http').createServer(app)
const io = require('socket.io')(server)
const { expressCspHeader, INLINE, SELF } = require('express-csp-header')
io.attach(server)
app.use(expressCspHeader({
directives: {
'default-src': [SELF],
'script-src': [SELF, INLINE, 'https://cdnjs.cloudflare.com'],
'connect-src': [SELF],
}
}))
// serve static files in the 'public' directory
app.use('/', express.static(__dirname + '/public'))
// socket.io functions
io.on('connection', function (socket) {
console.log("Somebody connected via socket.io")
})
// start listening
server.listen(PORT, () => {
console.log(`Listening on port ${PORT} (HTTP + SOCKET.IO) ...`)
})
})()
This is my client-side code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.1/socket.io.js" integrity="sha512-MgkNs0gNdrnOM7k+0L+wgiRc5aLgl74sJQKbIWegVIMvVGPc1+gc1L2oK9Wf/D9pq58eqIJAxOonYPVE5UwUFA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script type="text/javascript">
let socket = io(window.location.host)
socket.on('connect_error', (err) => {
console.log(`connect_error due to ${err.message}`)
})
socket.on('connect', function() {
console.log('Connected to socket.io server')
})
</script>
</body>
</html>
In Chrome, I get this error message:
Long-polling works but I can't figure out why websockets won't. In the Network tab, it says that the websocket connection has "Finished":
What causes this error? It seems like a pretty standard issue to me.
I appreciate any help. Thanks!
I got the answer somewhere else. For completeness: It's because I attached the server twice.
...
const io = require('socket.io')(server)
...
io.attach(server)
...
Complete working server script:
(async function() {
'use strict';
// environment variables
const PORT = 8888
// npm packages
const express = require('express')
const { createServer } = require('http')
const { Server: SocketServer } = require('socket.io')
const { expressCspHeader, INLINE, SELF } = require('express-csp-header')
const app = express()
const httpServer = createServer(app)
const io = new SocketServer(httpServer, { /* options */ })
app.use(expressCspHeader({
directives: {
'default-src': [SELF],
'script-src': [SELF, INLINE, 'https://cdnjs.cloudflare.com'],
'connect-src': [SELF],
}
}))
// serve static files in the 'public' directory
app.use('/', express.static(__dirname + '/public'))
// socket.io functions
io.on('connection', (socket) => {
console.log("Somebody connected via socket.io")
})
// start listening
httpServer.listen(PORT, () => {
console.log(`Listening on port ${PORT} (HTTP + SOCKET.IO) ...`)
})
})()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.