如何通过 ES6 语法在 node.js 中使用 socket.io答案

【问题标题】：How to use socket.io in node.js with ES6 syntax如何通过 ES6 语法在 node.js 中使用 socket.io
【发布时间】：2021-01-14 14:49:57
【问题描述】：

我想制作一个使用 oop 架构和 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 连接套接字，它显示连接超时。

【问题讨论】：

我正在尝试通过socket-client-tool amritb.github.io/socketio-client-tool进行连接
您在哪里/如何托管您的服务器？也许您没有监听云提供商希望您监听的端口？
我目前在本地主机上，也在监听端口。但是什么都没有
我也试过用 require 而不是 import。它与要求一起工作
等等，那你怎么用amritb.github.io/socketio-client-tool呢？你在使用一些隧道工具吗？您在 socket-client-tool 中作为“服务器 url”传递的究竟是什么？

标签： javascript node.js ecmascript-6 websocket socket.io

【解决方案1】：

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

我使用以下方法解决了这个问题，并将套接字连接到端口 5000 上我已经存在的 node express 服务器。

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;

【讨论】：

【解决方案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);
});

【讨论】：