當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

制作一个简易的即时聊天工具

發布時間：2024/8/1 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了制作一个简易的即时聊天工具小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

實現簡易的群聊天室

進入對應的文件夾

npm init -y ?(將會生一個package.json描述當前項目的基本信息)
# 安裝socket.io
npm install --save socket.io

整理業務場景與實現思路：

實現群聊。

當打開群聊頁面時，建立websocket連接，每當有客戶端連接成功，即當做進入該群聊天室。

點擊發送按鈕，可將自己寫的消息，發送給服務端，由服務端轉發給聊天室的所有人。

客戶端接收服務端返回的消息，顯示在聊天記錄列表中。

統計并更新在線人數。

在服務端維護一個全局變量：count=0；用于表示當前在線人數。

服務端一旦監聽到客戶端連接成功，count++

服務端一旦監聽到客戶端連接斷開，count--

只要count一有變化，就需要向所有客戶端發消息（countmsg），更新在線人數。

客戶端接收countmsg消息，更新人數即可。

服務器端 node.js

// 引入相關模塊監聽客戶端的連接 const http = require('http').createServer() const socketio = require('socket.io')(http, { cors: { origin:'*' } // 允許所有域名訪問 })let count = 0 // 監聽連接的建立 socketio.on('connection', function(socket){console.log('有客戶端進來了:' + socket.id)// 更新在線人數count++socketio.emit('countmsg', count)// 監聽socket的斷開，一旦連接斷開，則count--socket.on('disconnect', function(){count--socketio.emit('countmsg', count)})// 監聽客戶端發過來的消息socket.on('textmsg', function(data){socketio.emit('textmsg', data) // 收到什么就給所有客戶端都發一遍}) })http.listen(5050, ()=>{console.log('服務器已啟動...') })

服務器端完成以后接下來就是我們的客戶端,我們可以先準備一個登錄頁面,讓用戶注冊自己的昵稱,代碼如下

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>微信聊天室</title><link rel="stylesheet" href="styles/normalize.css"><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/chart.css"></head><body><div id="login-container"><div class="login-title">微信聊天室</div><div class="login-user-icon"><img src="images/login.png" alt=""></div><div><input type="text" id="username" class="login-item login-username" placeholder="請輸入聊天昵稱"></div><div><input type="button" id="login" class="login-item login-button" value="登錄"></div></div><script>login.onclick = function(){// 準備name與avatar名let name = username.valuelet avatar = Math.floor(Math.random()*100)+".jpg"window.location = `chart.html?name=${name}&avatar=${avatar}`}</script></body> </html>

?運行結果如下

用戶登錄以后就可以來到聊天界面進行聊天

如果用戶沒有注冊昵就直接打開聊天界面就會跳轉到登錄頁面

打開兩個聊天室,進行檢測

?聊天頁面的代碼如下

<!DOCTYPE html> <html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微信聊天室</title><link rel="stylesheet" href="styles/normalize.css" /><link rel="stylesheet" href="styles/reset.css" /><link rel="stylesheet" href="styles/chart.css" /></head><body><div id="chart-container"><div class="chart-user-list" id="chart-user-list"><div class="user-item"><img src="images/avatar/15.jpg" alt="" />未知名</div></div><div class="chart-main-area"><div class="chart-main-title"><h1>微信聊天室(<span id="userNumber"></span>人)-<spanid="currentUser"></span></h1></div><div class="chart-list" id="chart-list"></div><div class="chart-form"><div><textarea class="chart-form-message" id="message"></textarea></div><div><inputtype="button"id="send"class="chart-form-send"value="發表"/></div></div></div></div><script src="scripts/socket.io.js"></script><script>// 判斷，如果不是登錄過來的，則跳轉回登錄頁面let search = decodeURI(window.location.search) // 拿到瀏覽器地址欄的查詢字符串if (!search) {window.location = 'index.html'}let name = search.split('&')[0].split('=')[1]let avatar = search.split('&')[1].split('=')[1]console.log(`name:${name} avatar:${avatar}`)// 更新頁面中的頭像與昵稱let userInfoDiv = document.getElementById('chart-user-list')userInfoDiv.innerHTML = `<div class="user-item"><img src="images/avatar/${avatar}" alt="">${name}</div>`// 建立websocket連接let socket = io('http://127.0.0.1:8081')console.log('連接成功', socket)// 監聽服務端返回的更新人數的消息socket.on('countmsg', function (data) {userNumber.innerHTML = data //更新span，顯示最新的人數})// 監聽服務端返回的消息socket.on('textmsg', function (data) {console.log('服務端發回：', data)// 追加到聊天記錄列表中let list = document.getElementById('chart-list')let html = list.innerHTMLhtml += `<div class="chart-item"><div class="user-face"><img src="images/avatar/${data.avatar}" alt=""></div><div style="font-size:0.9em;">${data.name}</div><div class="user-message">${data.content}</div></div>`list.innerHTML = html// dom操作，使list的滾動條持續在底部list.scrollTop = list.scrollHeight})// 點擊發表按鈕，發送消息send.onclick = function () {if (message.value && message.value.length < 30)//發送消息 {content:xx, name:xx, avatar:xx}socket.emit('textmsg', {content: message.value,name,avatar,})message.value = ''}</script></body> </html>

總結

以上是生活随笔為你收集整理的制作一个简易的即时聊天工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： sketchup 2018下载与安装教程
下一篇：快捷方式文件修复