當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2024/8/1 编程问答 51 豆豆

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

實(shí)現(xiàn)簡(jiǎn)易的群聊天室

進(jìn)入對(duì)應(yīng)的文件夾

npm init -y ?(將會(huì)生一個(gè)package.json描述當(dāng)前項(xiàng)目的基本信息)
# 安裝socket.io
npm install --save socket.io

整理業(yè)務(wù)場(chǎng)景與實(shí)現(xiàn)思路：

實(shí)現(xiàn)群聊。

當(dāng)打開(kāi)群聊頁(yè)面時(shí)，建立websocket連接，每當(dāng)有客戶端連接成功，即當(dāng)做進(jìn)入該群聊天室。

點(diǎn)擊發(fā)送按鈕，可將自己寫(xiě)的消息，發(fā)送給服務(wù)端，由服務(wù)端轉(zhuǎn)發(fā)給聊天室的所有人。

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

統(tǒng)計(jì)并更新在線人數(shù)。

在服務(wù)端維護(hù)一個(gè)全局變量：count=0；用于表示當(dāng)前在線人數(shù)。

服務(wù)端一旦監(jiān)聽(tīng)到客戶端連接成功，count++

服務(wù)端一旦監(jiān)聽(tīng)到客戶端連接斷開(kāi)，count--

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

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

服務(wù)器端 node.js

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

服務(wù)器端完成以后接下來(lái)就是我們的客戶端,我們可以先準(zhǔn)備一個(gè)登錄頁(yè)面,讓用戶注冊(cè)自己的昵稱,代碼如下

<!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="請(qǐng)輸入聊天昵稱"></div><div><input type="button" id="login" class="login-item login-button" value="登錄"></div></div><script>login.onclick = function(){// 準(zhǔn)備name與avatar名let name = username.valuelet avatar = Math.floor(Math.random()*100)+".jpg"window.location = `chart.html?name=${name}&avatar=${avatar}`}</script></body> </html>

?運(yùn)行結(jié)果如下

用戶登錄以后就可以來(lái)到聊天界面進(jìn)行聊天

如果用戶沒(méi)有注冊(cè)昵就直接打開(kāi)聊天界面就會(huì)跳轉(zhuǎn)到登錄頁(yè)面

打開(kāi)兩個(gè)聊天室,進(jìn)行檢測(cè)

?聊天頁(yè)面的代碼如下

<!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="發(fā)表"/></div></div></div></div><script src="scripts/socket.io.js"></script><script>// 判斷，如果不是登錄過(guò)來(lái)的，則跳轉(zhuǎn)回登錄頁(yè)面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}`)// 更新頁(yè)面中的頭像與昵稱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)// 監(jiān)聽(tīng)服務(wù)端返回的更新人數(shù)的消息socket.on('countmsg', function (data) {userNumber.innerHTML = data //更新span，顯示最新的人數(shù)})// 監(jiān)聽(tīng)服務(wù)端返回的消息socket.on('textmsg', function (data) {console.log('服務(wù)端發(fā)回：', data)// 追加到聊天記錄列表中l(wèi)et 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的滾動(dòng)條持續(xù)在底部list.scrollTop = list.scrollHeight})// 點(diǎn)擊發(fā)表按鈕，發(fā)送消息send.onclick = function () {if (message.value && message.value.length < 30)//發(fā)送消息 {content:xx, name:xx, avatar:xx}socket.emit('textmsg', {content: message.value,name,avatar,})message.value = ''}</script></body> </html>

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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