【发布时间】:2019-05-02 11:39:07
【问题描述】:
我正在尝试用socketIO,express,mongoDB制作一个基本的聊天应用程序,一切正常。
我想要的功能是,添加最新消息并将消息div滚动到底部,这样就可以了。
附加消息的格式如下:
$("#textdiv").append(` <li class='blueText'> <img src="//unsplash.it/50/50"/> ${message.name} </li> <p class='blueText'> ${message.message} </p> <span class='blueText'>Posted on: ${message.time.slice(0, 10) } <span class='spacial'> at: ${message.time.slice(11, 19) }</span> </span>`);
时间戳工作正常,并且没有对上述代码行进行其他直接更改,它停止工作,或者仅在页面刷新后工作。控制台记录“消息已保存”,但我在客户端 cosnole 中得到 Uncaught TypeError: Cannot read property 'slice' of undefined。但这只是问题之一,而不是问题之一。
我的目标是在用户加入或离开聊天室时显示一条消息。
我只有一个 server.js 和一个 index.html 文件。
这里是来自 server.js 文件的相关 IO JS:
io.on('connection', (socket) =>{
console.log('a user is connected', socket.id); // works
socket.emit('newEntry', { userID: socket.id, // works and is displayed on the front end and console
description: 'Has joined the chat room!'
});
setTimeout(function() { // works
socket.emit('testerEvent', { description: 'A custom event named
testerEvent!'});
}, 4000);
socket.on('clientEvent', function(data) { // works
console.log(data);
// here the troubles start
socket.on('disconnect', function(){
console.log('user disconnected', socket.id); // this works
socket.emit('leaving', { userID: socket.id, // this does not work, is logged on sevrer console, but nothing on client, no error
description: 'Has left the chat room!'
});
});
})
});
index.html中对应的代码是:
var socket = io(); // init
socket.emit('clientEvent', 'Sent an event from the client!'); // works
$(() => { // works
$("#send").click(()=>{
sendMessage({name: $("#name").val(), message:
$("#message").val()});
})
getMessages();
})
socket.on('message', addMessages)
socket.on('testerEvent', function(data){ // works
console.log(data);
$("#textdiv").append(` <li class='blueText'> ${data.description} </li> `);
});
// this does not work, its looged on the server side console but nothing happens on client
socket.on('leaving', function(data){
console.log(data);
$("#textdiv").append(` <li class='greenText'> User ${data.userID}
${data.description} </li> `);
});
//the following does work, it should append the text to the last message but I can sort that out later.
socket.on('newEntry', function(data){
console.log(data);
$("#textdiv").append(` <li class='blueText'> User ${data.userID}
${data.description} </li> `);
});
所以为什么我的留言不起作用,看起来我在 socket.on('disconnect', function(){ 部分所做的一切都不起作用。
当我从以下模型中获取时间戳时尝试使用 slice 时遇到了前面提到的错误,我该如何更改?我只想让聊天显示“在 [日期] 在 [时间] 发布。
在server,js中,定义了模型:
var Message = mongoose.model('Message',{
name : String,
message : String,
time : { type : Date, default: Date.now }
})
最后一件事,我怎样才能清除控制台,每当我在 localhost 3000 上重新启动浏览器时,所有旧消息都会显示并重新呈现,即使在新选项卡中,我该如何阻止它,这非常繁琐等待所有以前的消息加载,尤其是像我这样容易出错的代码(请原谅我,我是服务器端的新手,但我喜欢它:-))。
github 仓库:https://github.com/dampopgit/nodejsChat
代码比看起来要小,感谢所有帮助。
Localhost3000 和入口点 nodemon ./server.js
我知道这是一个半问题,但我主要想知道我在 server.js 中的 socket.on('disconnect', function(){} 部分做错了什么。
接下来是如何将生成的 ID 分配给用户名,所以它说用户 [用户名] 已加入/离开聊天。但首先要做的事情。感谢您的观看。
我还注意到除了最后一条之外的每条聊天消息都有相同的时间戳,这很糟糕。为什么会这样。看起来整个时间戳可能不应该从 mongoDBs 模型生成,对吧?
【问题讨论】:
标签: javascript jquery socket.io chat