提问者:小点点

Socket.io不使用Socket.on添加消息


我正在尝试使用socket.io创建一个实时聊天。我有一切工作,除了自动更新时,别人张贴了一个新的消息。我相信我的io.sockets.emit&;socket.on('message',getMessages());

我试过各种发射和套接字的组合。我使用的是express 4.16.4和Socket.IO 2.2.0。

这是我的index.js。

var express = require('express');
var router = express.Router();
var app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);

//Render Chat
router.get('/Chat', function(req, res, next) {
    ChatData.find({},(err, messages)=> {
    var chatmessages = messages;    
    res.render('Chat', {messages: chatmessages, csrfvalid: req.session.csrf, csrfToken: req.csrfToken(), loginerrors: req.session.loginerrors, success: req.session.success, errors: req.session.errors, user: req.session.user });
    req.session.errors = null;
    req.session.loginerrors = null;
    req.session.csrfvalid = null;
    })
});

//GET Messages
router.get('/messages', (req, res) => {
  ChatData.find({},(err, messages)=> {
    res.send(messages);
  })
})

//POST chat
router.post('/chat', function(req, res, next) {
    var item = {
        name: req.body.name,
        message: req.body.message
    };  
    var data = new ChatData(item);
    data.save(function(err) {
        if(err){
            console.log(err);
            return;         
        }
        io.sockets.emit("message", req.body);
        res.send({});       
    })  
});

这是我的聊天客户端javascript

<script>
   var socket = io('http://MY_IP:3000', { transport : ['websocket'] });
    $(() => {
        $("#send").click(()=>{
            sendMessage({name: $("#name").val(), message: $("#message").val(), _csrf: $("#csrf").val()});
            document.getElementById('name').value = "";
            document.getElementById('message').value = "";
        })
        //getMessages()
    })
    socket.on('message', getMessages());

    function addMessages(message){
        $("#messages").append('<b>', message.name, '</b> : ' , message.message,' <a href="delete?_id='+message._id+'">Delete</a><br><br>')
    }
    function getMessages(){
      $.get('http://MY_IP:3000/messages', (data) => {
        data.forEach(addMessages);
      })
    }
    function sendMessage(message){
      $.post('http://MY_IP:3000/chat', message)
    }
</script>

当我从另一个客户端发布聊天时,我的计算机应该会自动在div的底部加载新消息。我目前必须重新加载页面。我相信错误在IO.Sockets.Emit或Socket.On中。

在我的server.js中,我使用了下面的代码,这是可行的。

//Socket
io.on('connection', () => { console.log('a user is connected') });

共2个答案

匿名用户

在客户端代码中尝试此修改。

      function getMessages(){
          $.get('http://MY_IP:3000/messages', (data) => {
             $.each(data,(i,v)=>{
                 addMessages(v)
             })
          })
       }

匿名用户

当将getMessages()函数指定为客户端套接字message事件的处理程序时,您似乎正在调用该函数:

/* This is incorrect, as you're calling getMessages() immediately,
rather than specifying it as a function handler to be called when 
the "message" event occurs */
socket.on('message', getMessages());

从该行的GetMessages()中删除()应该可以解决此问题:

/* Corrected code */
socket.on('message', getMessages);

/* Add another call to getMessages() to fetch messages automatically on start */
getMessages()

为了确保在客户端应用程序启动时自动获取消息,可以在socket.on(。。。)之后直接添加对getMessages()的第二个调用,如上所示。