使用Nodejs和socket.io創建一個實時的聊天應用

原創

2020-04-23 15:10

在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": "index.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)
}