使用Nodejs和socket.io创建一个实时的聊天应用

在Youtube上看到了一个视频Build a Real Time Chat App With Node.js And Socket.io，作者的giithub地址为:https://github.com/WebDevSimplified，他的CodeOpen地址是：https://codepen.io/WebDevSimplified

Build a Real Time Chat App With Node.js And Socket.io

相关代码我已经上传到github-ChatRoomApp和gitee-ChatApp，你可以直接使用git克隆下载源代码

git clone https://github.com/ccf19881030/ChatRoomApp.git

或

git clone https://gitee.com/havealex/ChatApp.git

项目前期准备

找一个趁手的前端开发工具，我使用的是VSCode，并且安装好Nodejs和npm、cnpm等。安装好开发环境和Nodejs，配置好nodejs的npm等环境变量后，创建一个ChatRoomApp文件夹，使用VSCode打开这个文件夹，打开终端在该文件夹所在目录下使用npm或cnpm安装socket.io和nodemon依赖

cnpm install socket.io

cnpm install --save-dev nodemon

创建index.html文件

如下：

<!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 defer src="http://localhost:3000/socket.io/socket.io.js"></script>
 <script defer src="client.js"></script>
 <style lang="less">
   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;
    }
 </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>

在VSCode的项目中运行如下命令：

npm init

按照提示输出相应的项目配置信息，会在当前目录下生成一个package.json的项目配置文件，如下所示：

{
  "name": "chatroomapp",
  "version": "1.0.0",
  "description": "Build a Real Time Chat App With Node.js And Socket.io",
  "main": "server.js",
  "scripts": {
    "devStart": "nodemon server.js"
  },
  "keywords": [
    "Nodejs",
    "and",
    "Socket.io"
  ],
  "author": "ccf19818030",
  "license": "ISC",
  "dependencies": {
    "socket.io": "^2.3.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.3"
  }
}

主要改变的是：

"scripts": {
    "devStart": "nodemon server.js"
  },

这条命令，将运行命令改成使用nodemon server.js，运行服务端代码server.js，之所以使用nodemon主要是因为它相比较node命令来说可以进行服务端代码的热更新。

server.js

const io = require('socket.io')(3000)
const usersList = {}

io.on('connection', socket => {
  socket.on('new-user', userName => {
    usersList[socket.id] = userName
    socket.broadcast.emit('user-connected', userName)
  })
  socket.on('send-chat-message', message => {
    socket.broadcast.emit('chat-message', { message: message, 
        userName: usersList[socket.id]} )
  })
  socket.on('disconnect', () => {
    socket.broadcast.emit('user-disconnected', usersList[socket.id])
    delete usersList[socket.id]
  })
})

client.js

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

const userName = prompt('What is your name?')
appendMessage('You joined')
socket.emit('new-user', userName)

socket.on('chat-message', data => {
  appendMessage(`${data.userName}: ${data.message}`)
})

socket.on('user-connected', userName => {
  // console.log(data)
  appendMessage(`${userName} connected`)
})

socket.on('user-disconnected', userName => {
  // console.log(data)
  appendMessage(`${userName} disconnected`)
})

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

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