Javascript 在文本中显示时间_Javascript_Node.js_Express_Sockets

Javascript 在文本中显示时间

javascript node.js express sockets

Javascript 在文本中显示时间,javascript,node.js,express,sockets,Javascript,Node.js,Express,Sockets,我有几个基本的问题，无论我找得有多深，都找不到有效的答案我的问题是，当他们像whatsap group那样在聊天室里发短信时，我想在用户名内显示实时信息。我从互联网上复制了聊天室的代码，然后我通过添加moment.js更改了库，然后我在server.js和script.js上添加了一些代码，但仍然出现错误，并且没有在文本内显示时间。所以请帮助我解决此问题，因为我是node.js的新手。我将感谢你的帮助和努力 server.js const express = require('expres

我有几个基本的问题，无论我找得有多深，都找不到有效的答案

我的问题是，当他们像whatsap group那样在聊天室里发短信时，我想在用户名内显示实时信息。我从互联网上复制了聊天室的代码，然后我通过添加moment.js更改了库，然后我在server.js和script.js上添加了一些代码，但仍然出现错误，并且没有在文本内显示时间。所以请帮助我解决此问题，因为我是node.js的新手。我将感谢你的帮助和努力

server.js

  const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const moment = require('moment');
app.set('views', './views')
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.use(express.urlencoded({ extended: true }))

const rooms = { }
const botName = 'ChatCord Bot';

app.get('/', (req, res) => {
  res.render('index', { rooms: rooms })
})

app.post('/room', (req, res) => {
  if (rooms[req.body.room] != null) {
    return res.redirect('/')
  }
  rooms[req.body.room] = { users: {} }
  res.redirect(req.body.room)
  // Send message that new room was created
  io.emit('room-created', req.body.room)
})

app.get('/:room', (req, res) => {
  if (rooms[req.params.room] == null) {
    return res.redirect('/')
  }
  res.render('room', { roomName: req.params.room })
})

server.listen(3000)

io.on('connection', socket => {
  socket.on('new-user', (room, name) => {
    socket.join(room)
    rooms[room].users[socket.id] = name
    socket.to(room).broadcast.emit('user-connected', name)

  })
  socket.on('send-chat-message', (room, message) => {
    socket.to(room).broadcast.emit('chat-message', { message: message, name: rooms[room].users[socket.id] })


  })


  socket.on('disconnect', () => {
    getUserRooms(socket).forEach(room => {
      socket.to(room).broadcast.emit('user-disconnected', rooms[room].users[socket.id])
      delete rooms[room].users[socket.id]
    })
  })
})

function getUserRooms(socket) {
  return Object.entries(rooms).reduce((names, [name, room]) => {
    if (room.users[socket.id] != null) names.push(name)
    return names
  }, [])
}

Script.js

   const socket = io('http://localhost:3000')
const messageContainer = document.getElementById('message-container')
const roomContainer = document.getElementById('room-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')


if (messageForm != null) {
  const name = prompt('What is your name?')
  appendMessage('You joined')
  socket.emit('new-user', roomName, name)

  messageForm.addEventListener('submit', e => {
    e.preventDefault()
    const message = messageInput.value
    appendMessage(`You: ${message}`)
    socket.emit('send-chat-message', roomName, message)

    messageInput.value = ''
  })
}



socket.on('room-created', room => {
  const roomElement = document.createElement('div')
  roomElement.innerText = room
  const roomLink = document.createElement('a')
  roomLink.href = `/${room}`
  roomLink.innerText = 'join'
  roomContainer.append(roomElement)
  roomContainer.append(roomLink)
})

socket.on('chat-message', data => {
  appendMessage(`${data.name}: ${data.message}`)
  io.to(user.room).emit('message', formatMessage(name, message) );
})


socket.on('user-connected', name => {
  appendMessage(`${name} connected`)
})

socket.on('user-disconnected', name => {
  appendMessage(`${name} disconnected`)
})

function appendMessage(message) {
  const messageElement = document.createElement('div')
  messageElement.innerText = message
  messageContainer.append(messageElement)

}
function formatMessage(name, text) {
  return {
    name,
    text,
    time: moment().format('h:mm a')
  };
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Chat App</title>
  <script>
    const roomName = "<%= roomName %>"
  </script>
  <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script defer src="script.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
    }

    #message-container {
      width: 80%;
      max-width: 1200px;
    }

    #message-container div {
      background-color: #CCC;
      padding: 5px;
    }

    #message-container div:nth-child(2n) {
      background-color: #FFF;
    }

    #send-container {
      position: fixed;
      padding-bottom: 30px;
      bottom: 0;
      background-color: white;
      max-width: 1200px;
      width: 80%;
      display: flex;
    }

    #message-input {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <div id="message-container"></div>
  <form id="send-container">
    <input type="text" id="message-input">
    <button type="submit" id="send-button">Send</button>
  </form>
</body>
</html>

room.ejs

   const socket = io('http://localhost:3000')
const messageContainer = document.getElementById('message-container')
const roomContainer = document.getElementById('room-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')


if (messageForm != null) {
  const name = prompt('What is your name?')
  appendMessage('You joined')
  socket.emit('new-user', roomName, name)

  messageForm.addEventListener('submit', e => {
    e.preventDefault()
    const message = messageInput.value
    appendMessage(`You: ${message}`)
    socket.emit('send-chat-message', roomName, message)

    messageInput.value = ''
  })
}



socket.on('room-created', room => {
  const roomElement = document.createElement('div')
  roomElement.innerText = room
  const roomLink = document.createElement('a')
  roomLink.href = `/${room}`
  roomLink.innerText = 'join'
  roomContainer.append(roomElement)
  roomContainer.append(roomLink)
})

socket.on('chat-message', data => {
  appendMessage(`${data.name}: ${data.message}`)
  io.to(user.room).emit('message', formatMessage(name, message) );
})


socket.on('user-connected', name => {
  appendMessage(`${name} connected`)
})

socket.on('user-disconnected', name => {
  appendMessage(`${name} disconnected`)
})

function appendMessage(message) {
  const messageElement = document.createElement('div')
  messageElement.innerText = message
  messageContainer.append(messageElement)

}
function formatMessage(name, text) {
  return {
    name,
    text,
    time: moment().format('h:mm a')
  };
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Chat App</title>
  <script>
    const roomName = "<%= roomName %>"
  </script>
  <script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
  <script defer src="script.js"></script>
  <style>
    body {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
    }

    #message-container {
      width: 80%;
      max-width: 1200px;
    }

    #message-container div {
      background-color: #CCC;
      padding: 5px;
    }

    #message-container div:nth-child(2n) {
      background-color: #FFF;
    }

    #send-container {
      position: fixed;
      padding-bottom: 30px;
      bottom: 0;
      background-color: white;
      max-width: 1200px;
      width: 80%;
      display: flex;
    }

    #message-input {
      flex-grow: 1;
    }
  </style>
</head>
<body>
  <div id="message-container"></div>
  <form id="send-container">
    <input type="text" id="message-input">
    <button type="submit" id="send-button">Send</button>
  </form>
</body>
</html>


聊天应用
const roomName=“”
身体{
填充：0；
保证金：0；
显示器：flex；
证明内容：中心；
}
#消息容器{
宽度：80%；
最大宽度：1200px；
}
#消息容器分区{
背景色：#CCC；
填充物：5px；
}
#消息容器分区：第n个子（2n）{
背景色：#FFF；
}
#发送容器{
位置：固定；
填充底部：30px；
底部：0；
背景色：白色；
最大宽度：1200px；
宽度：80%；
显示器：flex；
}
#消息输入{
柔性生长：1；
}
发送

这是我迄今为止所做的代码，请检查它，我上传了两张图片一张是主屏幕另一张是现有房间错误显示，我在那里得到错误

最好在单独的模块中创建一个函数并将其导出。让我们创建一个文件，比如time.js

 const moment = require('moment');
const generateMsg = (text) => {
return {
    text,
    createdAt: moment().calendar()
}

}

module.exports={ 发电机 }

然后，每当您向客户端发送事件时，从服务器调用此函数

socket.broadcast.to(room).emit("msg", { message: generateMsg(`${user} has joined the group`) })

此函数将返回作为参数和时间给定的输入文本。然后在客户端，您可以执行添加消息和时间的操作

socket.on("msg", msg => {
showMessage(msg.message.text, msg.message.createdAt);

})

}