使用Nodejs和socket.io創(chuàng)建一個(gè)實(shí)時(shí)的聊天應(yīng)用

在Youtube上看到了一個(gè)視頻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

相關(guān)代碼我已經(jīng)上傳到github-ChatRoomApp和gitee-ChatApp遥皂，你可以直接使用git克隆下載源代碼

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

或

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

項(xiàng)目前期準(zhǔn)備

找一個(gè)趁手的前端開發(fā)工具，我使用的是VSCode耀销，并且安裝好Nodejs和npm畔况、cnpm等。安裝好開發(fā)環(huán)境和Nodejs憋沿，配置好nodejs的npm等環(huán)境變量后，創(chuàng)建一個(gè)ChatRoomApp文件夾沪猴，使用VSCode打開這個(gè)文件夾辐啄，打開終端在該文件夾所在目錄下使用npm或cnpm安裝socket.io和nodemon依賴

cnpm install socket.io

cnpm install --save-dev nodemon

創(chuàng)建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的項(xiàng)目中運(yùn)行如下命令：

npm init

按照提示輸出相應(yīng)的項(xiàng)目配置信息，會在當(dāng)前目錄下生成一個(gè)package.json的項(xiàng)目配置文件运嗜，如下所示：

{
  "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"
  },

這條命令壶辜，將運(yùn)行命令改成使用nodemon server.js，運(yùn)行服務(wù)端代碼server.js担租，之所以使用nodemon主要是因?yàn)樗啾容^node命令來說可以進(jìn)行服務(wù)端代碼的熱更新砸民。

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)
}