當前位置：首頁 > 运维知识 > windows >内容正文

windows

WebSocket之仿QQWeb即时聊天系统(上)

發布時間：2025/3/15 windows 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 WebSocket之仿QQWeb即时聊天系统(上) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 前言

Java web學完了，到了學期末，開始課設了，一共給了幾個題目，大部分都是 JSP+servlet題目，當然我們也是主要學習的這些，一般都是什么什么管理系統，沒啥意思，看到一個仿QQWeb即時聊天系統的題目，眼前一亮，發現從來沒學過，一個有意思的題目，再次挑戰自己，從零開始學習JavaScript、nodejs、socket.io 不知道這次課設能收獲多少技術呢。

白嫖容易，創作不易，希望能讓大家有所收獲。
所有copy到的代碼均是度娘、csdn等可以查到的，我的課設項目絕大部分都是原創，只有一些特定的、不懂的用法是copy
基本上我查詢的資料(例如API等)都會在博客中列出網站，有需要的童鞋可以直接點擊查看
本博客原創，轉載請注明！

WebSocket之仿QQWeb即時聊天系統(上)
WebSocket之仿QQWeb即時聊天系統(下)
源碼：
鏈接：https://pan.baidu.com/s/1xmCzP0TTLkWqgHnp62K9sA
提取碼：Lin2
CSDN: https://download.csdn.net/download/RongLin02/19762352

本文原創，創作不易，轉載請注明！！！
本文鏈接
個人博客：https://ronglin.fun/archives/236
PDF鏈接：見博客網站
CSDN: https://blog.csdn.net/RongLin02/article/details/117945296

2. 課程設計

2.1. 總述

本次課程設計從周二開始共大概用時5天多完成，共涉及到HTML、CSS、JavaScript、Jquery、Nodejs、MySQL、Websocket、Socket.io等技術。由于我們平時上課主要講到的是Java Web，著重講述JSP+servlet開發網頁，平時練習也是直接用HTML較多，CSS樣式表用的較少，只對盒模型有基本概念，JavaScript基本上沒用過，只知道最最基本的語法，Jquery、Nodejs、Websocket、Socket.io等之前完全沒聽說過，全在這幾天快速學習，時間緊迫，能力有限，如有疏漏，請多多指點，謝謝！

2.2. 需求分析

先來看看我選的題目的基本需求
仿QQWeb即時聊天系統
功能要求：
實現Web的點對點即時的文本消息聊天功能。
實現Web的表情的發送、接收和顯示功能。
實現Web的圖片的發送、接收和顯示功能。
實現本地消息的存儲，在離線的時候也能加載和查看歷史消息；
要求使用WebSocket；

按照我當時的知識儲備和理解，逐點分析，重點在最后一個，要求使用WebSocket，簡單的看過WebSocket概念之后，可以發現，用WebSocket可以直接基本實現發送文本消息的功能，emoji表情的實現，查詢了一下，有基本的封裝好的接口，圖片的發送接收應該也有專門的插件，本地消息的存儲暫時沒什么思路。

2.3. 成果展示

啟動服務器

在根目錄輸入node app.js啟動后端，然后會彈出來一個前端的網站，在瀏覽器地址欄輸入這個網站。
實現聊天
然后分別登錄兩個用戶，然后實現聊天互交

實現圖片
然后展示發送圖片功能，左側是001賬號，右側是123賬號

本地消息
這個功能一直在想如何實現比較好，最后決定在前端請求下載聊天記錄，然后后端提供文件，然后前端在導入聊天記錄

總的功能就展示完了，再補充一些沒有展示的容錯性：
登錄界面，如果重復登錄就提示該用戶已經登錄，如果用戶名和密碼不對應，提示密碼錯誤!，如果之前從沒登陸過，直接注冊一個新號，寫入數據庫。
然后就是聊天界面，第一次登錄顯示的是和自己聊天的界面，想和誰聊天就在左側點擊對應的名字。

因為代碼文件太多，之后我會把所有代碼壓縮，上傳，現在簡單說一下每個功能的大概實現過程

3.1. 準備工作

要想完成這次課設，要有順手的開發工具，一定的知識儲備，還要有一定的代碼實現能力。
學習視頻：Web前端-3小時教你打造一個聊天室（websocket）
這個視頻是我開發過程中的主要學習資料，這里邊有很多的基礎知識，迅速入門，推薦仔細看完，我用了1.5倍速刷完之后才開始做課設的。
開發工具我用的Visual Studio Code

3.1.1. WebSocket

學習網站：HTML5 WebSocket
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
簡單的說，一般的TCP/IP協議，是客戶端提交一個請求(Get/Post)，然后服務器響應請求，服務器一般是沒法主動給客戶端發消息的，但是聊天系統是需要服務器給客戶端推送消息的。這就需要一個全雙工的協議，WebSocket就是，它可以主動給客戶端推送消。有關WebSocket的學習，簡單的看一下就行，大概了解它的概念就行了。

3.1.2. nodejs

這個有點麻煩，安裝過程比較簡單，很多東西我是直接這么用的，沒有什么
主要使用的是NPM。簡單的過一下安裝過程

3.1.2.1. 安裝nodejs

安裝Nodejs，有關Nodejs的安裝教程：Node.js 安裝配置
我這里迅速過一下流程。
我們去官方下載Nodejs的安裝包：Node.js 下載LTS(長期支持版本)版本的。
下載好后直接運行就行了。一直點擊下一步就安裝好了。中間有一個更改安裝目錄的，可以根據情況自行調整。
按照好之后，我們輸入node -v可以查看安裝的情況，如下圖：

如果提示 node 不存在，就要去查看一下環境變量中是否存在：此電腦–右鍵–屬性–高級系統設置–環境變量
找到path，點擊編輯，找一下有沒有nodejs的路徑，如果沒有可以重新安裝一下，或者添加上。

3.1.2.2. NPM

然后重點是NPM
NPM :NPM 使用介紹
菜鳥的教程中，有很多很多有關NPM的用法，我這里不過多的說明，就說下如何用npm安裝。
NPM是Nodejs下的包管理器，功能非常強大。我們之后要用npm安裝一些常用的模塊

安裝過程中，可能會有因為在此系統上禁止運行腳本。有關詳細信息，請參閱這樣的報錯導致沒法安裝，可以參考這個博客：
因為在此系統上禁止運行腳本。有關詳細信息，請參閱
解決方法是，Windows10，對著電腦左下角的開始菜單，右鍵，選擇Windows PowerShell(管理員)，然后輸入

set-executionpolicy remotesigned

然后再輸入Y寫就行了，原因是執行策略的設置問題。感謝大佬的博客！

3.1.3. socket.io

中文官方文檔：socket.io官方文檔
有關socket.io，視頻里也有很多描述，Socket.io是一個WebSocket庫，用起來很方便，而且本次課設也主要是用socket.io開發
官方的API已經很全面了，我這里只是提一下。
首先是安裝過程，在項目的根目錄，右鍵–在集成終端中打開，然后輸入下列代碼

npm install jquery npm install socketio npm install express

然后就會生成一個node_modules文件夾用來存放安裝好的模塊，一些配置信息會生成在package-lock.json和package.json文件中。
先說幾個常用的方法，

socket.emit('key',value);

這個是發送方法，key是名字，叫什么名字都行，value就是要發送的值，可以是服務器給客戶端發送，也可以是客戶端給服務器發送，類型也可以是一個對象。

socket.on('key',function(data){console.log(data);});

有發送就有接受，服務器或者客戶端會監聽，如果有終端通過key發送，就會獲取到發送的數據，并且封裝到data中，所以說上邊的那個data的值就是emit的value。

然后就是服務器的基本框架
在項目根目錄新建一個名為app.js的文件

const { data } = require('jquery'); var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http);app.use(require('express').static('public')) app.get('/', function(req, res){res.redirect('index.html') });io.on('connection', function(socket){console.log('connection')socket.emit('ser_send','NB666');socket.on('ser_acc',function(data){console.log(data);}); }); http.listen(3000, function(){console.log('listening on *:3000'); });

實現了一個最最基本的交互，向客戶端發送NB666字符串，還有一個接收客戶端的數據，并且輸出到終端中。
所以客戶端就應該這樣寫
在項目根目錄新建一個名為public的文件夾，在public文件夾下，新建一個名為index.html文件，然后以后可以將所有前端的代碼都放在public文件夾下，更加方便整理。

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>test</title> </head> <body><script src="/socket.io/socket.io.js"></script><script>var socket = io();socket.on('ser_send',function(data){alert(data);})socket.emit('ser_acc','測試')</script> </body> </html>

在項目的根目錄，右鍵–在集成終端中打開，然后輸入node app.js，在瀏覽器的地址欄輸入127.0.0.1:3000然后就可以看到數據的交互了。

終于準備工作做完了！到此，一些需要的最基本的課外知識已經學完了。
接下來就是根據需求開始敲代碼了。

由于內容較多，請看下篇 =w=

總結

以上是生活随笔為你收集整理的WebSocket之仿QQWeb即时聊天系统(上)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： Qt学习之Qt基础入门(中)
下一篇： Keil | 使用Register Wi