How to create socket.io server without using http module? - node.js

Question

There is http module to create a server and passing express app context to it and then listening to it.
I've seen express' app.listen returns a Server context
Now how to create a socket.io server using app.listen's context
I've tried the below code but it is not working.
onst express = require('express')
const socket = require('socket.io')
const PORT = 5000
const app = express()
const server = app.listen(PORT, () => console.log(`Server started on port ${PORT}`))
const io = new socket.Server(server)
io.on("connection", function(socket) {
console.log("A new socket has joined: " + socket.id)
socket.on("hello", function(data) {
console.log(data);
})
})
Code starts without throwing any error but the socket server is not starting

Answer 1

Are you sure your socket server is not starting? May be you have a problem on client side...
I'm added index.html with client code and it connected to backend successfully.
Checkout: https://github.com/theanurin/stackoverflow.68511005
P.S.
Server started on port 5000
A new socket has joined: IqEjjc0dBHYSHqpMAAAB

Answer 2

Socket IO's documentation has a section on integrating with Express. Their example code looks like this:
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
While still using the http module directly, you could perhaps replace http.createServer(app) with your app.listen call. Mind you, I'm pretty sure that app.listen actually uses http.createServer under the hood. According to their documentation they do.

Answer 3

I made a connection with react native 'socket.io-client', your code worked to me
Here is my react native code
import React,{ Component } from "react";
import {View,TextInput,Text,StyleSheet} from 'react-native'
import io from "socket.io-client";
export default class ChatApp extends Component{
constructor(props) {
super(props);
this.state = {
chatMessage: "",
chatMessages: []
};
}
componentDidMount() {
this.socket = io("http://127.0.0.1:5000");
this.socket.on("hello", msg => {
this.setState({ chatMessages: [...this.state.chatMessages, msg]
});
});
}
submitChatMessage() {
this.socket.emit('hello', this.state.chatMessage);
this.setState({chatMessage: ''});
}
render() {
const chatMessages = this.state.chatMessages.map((chatMessage,index) => (
<Text key={index} style={{borderWidth: 2, top: 500}}>{chatMessage}</Text>
));
return (
<View style={styles.container}>
{chatMessages}
<TextInput
style={{height: 40, borderWidth: 2, top: 500}}
autoCorrect={false}
value={this.state.chatMessage}
onSubmitEditing={() => this.submitChatMessage()}
onChangeText={chatMessage => {
this.setState({chatMessage});
}}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
height: 400,
flex: 1,
},
});