使用 fetch api 时使用 socket.io 广播消息

Question

我正在使用 fetch api 发布和检索用户数据，效果很好，但我也想将 sioket.io 实现到 fetch 中，以从 mysql 数据库发出和广播我选择的数据。

服务器端：

var server = require('http').createServer(app);

var io = require('socket.io')(server);

app.use(function(request, result, next) {

    result.setHeader("Access-Control-Allow-Origin", "*");

    next();

})

dotenv.config({ path: './.env' });

var sqlDatabase = mysql.createConnection({

    host: process.env.DATABASE_HOST,

    user: process.env.DATABASE_USER,

    password: process.env.DATABASE_PASSWORD,

    database: process.env.DATABASE,

});

app.set('view engine', 'hbs');

app.use(express.urlencoded({ extended: false }));

app.use(express.json());

app.use(cookieParser('key cat'));

app.use(bodyParser.json());

app.use(bodyParser.urlencoded({ extended: false }));

app.use(expressValidator());

app.use(cors());

const publicDirectory = path.join(__dirname, './public')

app.use(express.static(publicDirectory));

var options = {

    host: process.env.DATABASE_HOST,

    user: process.env.DATABASE_USER,

    password: process.env.DATABASE_PASSWORD,

    database: process.env.DATABASE,

};

var sessionStore = new MySQLStore(options);

app.use(session({

    secret: 'key cat',

    resave: false,

    saveUninitialized: false,

    store: sessionStore,

    cookie: {

        httpOnly: true,

        secure: false,

        maxAge: 60000

    }

}));

app.use(passport.initialize());

app.use(passport.session());

sqlDatabase.connect((err) => {

    if (err) {

        console.log(err);

    } else {

        console.log('mysql is connected')

    }

});

io.on('connection', (socket) => {

    console.log('socket connect successful');

    socket.on('new_message', function(results) {

        console.log('Client says', results);

    })

如果我使用

result.end(JSON.stringify(results));

结果很好，除了我还想发射和广播数据，这就是我使用 sioket.io 的原因。

Answer 1

服务器端：io.on('connection', (socket) => {    console.log('socket connect successful');    socket.on('new_message', function(message) {        console.log('Client says', message);        io.emit('new_message', message)    })})app.get("/get_messages", function(request, result) {    sqlDatabase.query("SELECT users.username, comments.comments, comments.date FROM users INNER JOIN comments ON users.user_id=comments.user_id",        function(error, results) {            result.end(JSON.stringify(results));        });});客户端function loadcomments() {    fetch('http://localhost:5502' + '/get_messages')    .then(response => {            if (response.ok) {                console.log('success')                console.log(response);            } else {                console.log('failure')            }            return response.json();        })        .then(function(data) {            io.emit("new_message", data)            io.on("new_message", function(data) {                console.log("Server says", data);                output.innerHTML = '';                data.forEach(function(user) {                    var newUser = document.createElement("div");                    var newName = document.createElement("h5");                    var newDate = document.createElement("h5");                    var newMessage = document.createElement("h6");                    var display_username = document.createTextNode(JSON.stringify(user.username));                    var display_date = document.createTextNode(JSON.stringify(user.date));                    var display_comments = document.createTextNode(JSON.stringify(user.comments));                    newName.appendChild(display_username);                    newDate.appendChild(display_date);                    newMessage.appendChild(display_comments);                    newUser.appendChild(newName);                    newUser.appendChild(newDate);                    newUser.appendChild(newMessage);                    output.appendChild(newUser);请注意我如何构建这部分：  .then(function(data) {                        io.emit("new_message", data)            io.on("new_message", function(data) {                                console.log("Server says", data);                output.innerHTML = '';                data.forEach(function(user) {                    var newUser = document.createElement("div");我遇到的问题是我一直在数据库中获取第一个条目作为输出并重复。放置这个io.emit("new_message", data);io.on("new_message", function(data) {在此之上：output.innerHTML = '';data.forEach(function(user) {解决了问题。