使用 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) {

解决了问题。