如何在不使用 http 模块的情况下创建 socket.io 服务器？

Question

有 http 模块可以创建服务器并将 express 应用程序上下文传递给它，然后收听它。我见过 express' app.listen returns 一个服务器上下文现在如何使用 app.listen 的上下文

创建 socket.io 服务器

我试过下面的代码，但它不起作用。

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);
    })
})

代码启动时没有抛出任何错误，但套接字服务器没有启动

Answer 1

Socket IO 的文档中有一节是关于 integrating with Express 的。他们的示例代码如下所示：

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');
});

虽然仍然直接使用 http 模块，但您或许可以将 http.createServer(app) 替换为 app.listen 调用。请注意，我很确定 app.listen 实际上在幕后使用了 http.createServer。根据 their documentation 他们确实如此。

Answer 2

我连接了 React Native 'socket.io-client'，你的代码对我有用

这是我的 React 本机代码

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,
  },
});

Answer 3

您确定您的套接字服务器没有启动吗？可能是你的客户端有问题...

我添加了 index.html 客户端代码，它成功连接到后端。

结帐：https://github.com/theanurin/Whosebug.68511005

P.S.

Server started on port 5000
A new socket has joined: IqEjjc0dBHYSHqpMAAAB

如何在不使用 http 模块的情况下创建 socket.io 服务器？

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

node.js

express

socket.io

我连接了 React Native 'socket.io-client'，你的代码对我有用

这是我的 React 本机代码