Files
freeCodeCamp/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.chinese.md
Oliver Eyton-Williams 61460c8601 fix: insert blank line after ```
search and replace ```\n< with ```\n\n< to ensure there's an empty line
before closing tags
2020-08-16 04:45:20 +05:30

3.0 KiB
Raw Blame History

id, title, challengeType, videoUrl, localeTitle
id title challengeType videoUrl localeTitle
589fc832f9fc0f352b528e79 Send and Display Chat Messages 2 发送和显示聊天消息

Description

提醒一下,这个项目是基于Glitch的以下入门项目构建的,或者是从GitHub克隆的。是时候开始允许客户端向服务器发送聊天消息以向所有客户端发送消息已经在您的client.js文件中您应该看到在提交messgae表单时已经存在一段代码处理 $('form').submit(function(){ /*logic*/ });
在您处理表单提交的代码中您应该在定义“messageToSend”之后但在清除文本框#m之前发出事件。该事件应命名为“聊天消息”数据应为“messageToSend”。 socket.emit('chat message', messageToSend);现在在您的服务器上您应该收听事件“聊天消息”的套接字并将数据命名为“message”。一旦接收到事件应该然后发射所述事件“聊天消息”到所有插座io.emit与数据为含“名称”和“报文”的对象。现在再次在您的客户端上,您现在应该监听事件“聊天消息”,并在收到时,将一个列表项追加到#messages ,其名称为冒号和消息!此时聊天功能齐全,并在所有客户端发送消息!当您认为自己已经做对时,请提交您的页面。如果您遇到错误,可以在此处检查项目到此时为服务器客户端

Instructions

Tests

tests:
  - text: 服务器侦听“聊天消息”,然后正确发出
    testString: getUserInput => $.get(getUserInput('url')+ '/_api/server.js') .then(data => { assert.match(data, /socket.on.*('|")chat message('|")[^]*io.emit.*('|")chat message('|").*name.*message/gi, 'Your server should listen to the socket for "chat message" then emit to all users "chat message" with name and message in the data object'); }, xhr => { throw new Error(xhr.statusText); })
  - text: 客户端正确处理和显示事件“聊天消息”中的新数据
    testString: "getUserInput => $.get(getUserInput('url')+ '/public/client.js') .then(data => { assert.match(data, /socket.on.*('|\")chat message('|\")[^]*messages.*li/gi, 'You should append a list item to #messages on your client within the \"chat message\" event listener to display the new message'); }, xhr => { throw new Error(xhr.statusText); })"

Challenge Seed

Solution

// solution required

/section>