如何在使用ES6语法的node.js中使用socket.io

Question

我希望能使用面向对象编程架构和JavaScript ES6语法来制作一个聊天应用程序。我不知道如何初始化socket.io，也没有找到任何帮助。

以下是我的代码。

import express from 'express';
import http from 'http';
import config from 'config';
import SocketIO from 'socket.io'

const app = express();
const port = config.PORT;
app.set('port', port);
const server = http.createServer(app);
var io = SocketIO(server);
io.on('connection', socket => {
    console.log("Socket connected");
    
});

server.listen(port, () => console.log(`API running on localhost:${port}`));

我正在尝试使用socket-client-tool连接套接字，但它显示连接超时。

- Hammad Ali

---

我正在尝试通过socket客户端工具进行连接。 https://amritb.github.io/socketio-client-tool/ - Hammad Ali

我也尝试过使用 require 而不是 import。使用 require 是可以工作的。 - Hammad Ali

等等，你怎么使用https://amritb.github.io/socketio-client-tool/呢？你是在使用一些隧道工具吗？你在socket-client-tool中传递的“服务器URL”是什么？ - Tibebes. M

我只需输入URL，例如“http://localhost:3000/”，然后点击连接。 - Hammad Ali

让我们在聊天中继续这个讨论。 - Tibebes. M

Answer 1

我在这种情况下使用 import socketIo from 'socket.io'; 是不起作用的。

我采用了以下方法解决这个问题，并将套接字连接到已存在的端口为5000的节点表达服务器中：

import cors from 'cors';
import { createServer } from 'http';
import { Server } from 'socket.io'; //replaces (import socketIo from 'socket.io')

const httpServer = createServer(app);
const io = new Server(httpServer, { cors: { origin: '*' } });


io.on('connection', (socket) => {
  console.log('Connection established');
 
getApiAndEmit(socket);
  socket.on('disconnect', () => {
    console.log('Disconnected');
  });
});


const getApiAndEmit = (socket) => {
  const response = 'response you need';
  socket.emit('FromAPI', response);
};

app.set('port', process.env.PORT || 5000);

httpServer.listen(app.get('port'), function () {
  var port = httpServer.address().port;
  console.log('Running on : ', port);
});

在客户端，我按以下方式连接：

import React,{ useState, useEffect } from 'react';
import socketIOClient from 'socket.io-client';

const ENDPOINT = 'http://127.0.0.1:5000'; //endpoint port 5000

const MyComponent = () => {

  const [response, setResponse] = useState('');

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    console.log(socket);
    console.log(ENDPOINT);
    socket.on('FromAPI', (data) => {
      setResponse(data);
    });

  }, []);

     return <p>{response}</p>

}

export default MyComponent;

- Vidarshan Rathnayake

Answer 2

我在一个使用React的小项目中使用它，服务器端代码如下。

import bodyParser from 'body-parser';
import express from 'express';
import http from 'http';
import socketIo from 'socket.io';
import session from 'express-session'

var app = express();
const server = http.createServer(app)
   

// hook up session for express routes
const sessionMiddleware = session({
    // genid: req => uuidv4(),
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    cookie: {}
})

// hook up the session for socket.io connections
io.use((socket, next) => sessionMiddleware(socket.request, socket.request.res || {}, next));
app.use(sessionMiddleware)


io.origins('*:*')
io.on("connection", (socket) => {
    // socket.handshake.headers
    console.log(`socket.io connected: ${socket.id}`);    
    
    const { roomId } = socket.handshake.query;
    socket.join(roomId);
    
    // Leave the room if the user closes the socket
    socket.on("disconnect", () => {
        console.log(`Client ${socket.id} diconnected`);
        socket.leave(roomId);
    });
});
app.use((req, res, next) => {
    req.io = io
    next()
})

app.set('port', (process.env.PORT || 4000));

server.listen(app.get('port'), function () {
    var port = server.address().port;
    console.log("App now running on port", port);
});

- Víctor Manuel Monsalve Retamal

Answer 3

关于ES6的import语句

无需http。无需使用http创建服务器。

我只在Express + NodeJs后端上使用它，并使用网站 Socket.io测试工具进行测试，server.js代码如下：只需粘贴您的http://localhost:8080并发射或监听事件。使用socket.io 版本2.5.0

import express from 'express';
import SocketIO from 'socket.io';
let app = express();

let port = process.env.PORT || 8080;
let server = app.listen(port, () => {
    console.log('Listening on PORT :' + port);
});

let io = new SocketIO(server);

io.on('connection', (socket) =>
    {
    console.log("on connection",socket.id,);
    socket.on('ding', (ding) => {
        console.log(ding);
      socket.emit("update_user",{key:"value"});

    });

    socket.on('disconnect', () => {

        console.log("disconnected");
    });

    socket.on('userChat', (data) => {

        console.log(data);
    });
}
);

对于使用 socket.io >=4.x 的情况，请使用以下语法。

import { Server } from "socket.io";
const io = new Server(server);

- Hamza Muazzam

Answer 4

对于ES6和expressJs，请使用以下格式：

``` const app = express(); const PORT = 8000; ```

 const httpServer = app.listen(PORT, () => {
   console.log(`Server running at http://localhost:${PORT}`);
 });
const io = new Server(httpServer); // add after creating the http server

`

- arm

Answer 5

我已经尝试了官方socket.io文档中建议的起始代码块（如下），并且在我的端上运行正常。

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);

app.get('/', (req, res) => {
  res.send('<h1>Hello world</h1>');
});

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

- neonwatty

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community