2. 程式人生 > >Node.js 切近實戰(十一) 之實時通訊

Node.js 切近實戰(十一) 之實時通訊

阿新 • • 發佈：2019-02-12

今天我們主要看一下Socket.IO實時通訊，先看一下介面。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

.row

.col-md-9

.panel.panel-primary

.panel-heading

h3.panel-title(style='font-size:13px;') Chat Message

.panel-body#div_msgbody(style='min-height:590px;max-height:590px;overflow:auto;max-width:750px;')

#div_msg.panel-content(style='word-wrap:break-word;word-break: break-word;')

.panel-footer

#div_footer(style='height:36px;line-height:36px')    

.row

.col-md-8(style='color:#3f51b5;font-weight:bold') Chat History:

input#chat_history

.col-md-4.right-align-text 

a#link_clear(href='javascript:void(0)') Clear

.row

.col-md-10

input#txt_msg.form-control(type='text' style='height:40px;resize:none' maxlength=200 placeholder='Input message here.')

.col-md-2.right-align-text

button#btn_send.k-button.k-primary(type='button' style='height:40px;width:100%')

span.glyphicon.glyphicon-send

span(style='margin-left:5px') Send

.col-md-3

.panel.panel-primary

.panel-heading

h3.panel-title(style='font-size:13px;') Members

.panel-body.panel-inner-height(style='overflow:auto;')

#div_users.panel-content(style='word-break: break-word;')

.panel-footer

.left-margin-10 

span.text-color#total Member Count:0

#chat_historyWindow(style='display:none')

#chat_historyContent.panel-content(style='word-wrap:break-word;word-break: break-word;')

span#notify

block scripts

script(type='text/javascript' src='/javascripts/local/other/chat.js')

wKioL1eDsL6xz1MqAABsQWR8_7I057.png 

這就是聊天介面，左邊是聊天內容，右邊是參加聊天的使用者。要實現這個聊天，之前我們在部落格中提到了SingalR，可以用於ASP.NET，WinForm以及WPF。今天我們要使用Node.js平臺上的Socket.IO.js。首先要在專案中引用這個擴充套件包。

wKiom1eDscyQdWxlAACfiVxC6a8872.png

安裝好之後，在Package.json中就會自動加入這個包，管理起來。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

"dependencies": {

"array-splice": "^0.1.1",

"body-parser": "~1.8.4",

"busboy": "^0.2.12",

"cassandra-driver": "^3.0.0",

"cookie-parser": "~1.3.3",

"debug": "~2.0.0",

"express": "~4.9.8",

"express-session": "1.12.1",

"gridfs-stream": "^1.1.1",

"jade": "^1.11.0",

"log4js": "^0.6.29",

"mongoose": "~4.2.3",

"morgan": "^1.6.1",

"request": "^2.67.0",

"serve-favicon": "~2.1.3",

"socket.io": "^1.3.7",

"string.prototype.endswith": "^0.2.0",

"string.prototype.startswith": "^0.2.0"

}

我在這裡還使用的是老版本，哈哈，OK，老版本新版本都能用。我們進入主題，在第一篇環境搭建中，我就說了我們的啟動入口是www檔案。

wKioL1eDspryvKkZAAAOS6Gho1U804.png

在www檔案中，我們初始化了SocketIO的一些東西。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

var chatUserCount = 0;

var chatUsers = {};

var server = app.listen(app.get('port'), function() {

debug('Express server listening on port ' + server.address().port);

});

var io = require('socket.io')(server);

io.on('connection', function (socket) {

socket.on('joinchat', function (obj) {

console.log('a user connected:'+obj.UserName);

socket.name = obj.UserName;

if (!chatUsers.hasOwnProperty(obj.UserName)) {

chatUsers[obj.UserName] = obj;

chatUserCount++;

}

io.emit('joinchat', { chatUsers: chatUsers ,chatUserCount: chatUserCount,joinedUser: obj});

});

socket.on('leftchat', function () {

console.log('a user left');

if (chatUsers.hasOwnProperty(socket.name)) {

var obj = chatUsers[socket.name];

delete chatUsers[socket.name];

chatUserCount--;

io.emit('leftchat', { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });

}

});

socket.on('disconnect', function () {

if (chatUsers.hasOwnProperty(socket.name)) {

var obj = chatUsers[socket.name];

delete chatUsers[socket.name];

chatUserCount--;

io.emit('leftchat', { chatUsers: chatUsers, chatUserCount: chatUserCount, leftUser: obj });

}

});

socket.on('message', function (obj) {

io.emit('message', obj);

});

socket.on('error', function(exception) {

console.log('SOCKET ERROR');

socket.destroy();

});

});

在這裡當客戶端有使用者進入聊天時，就會發射joinchat事件，後臺就會觸發joinchat事件。當客戶端和服務端建立連線時，服務端就會發射廣播joinchat，所有連線的客戶端都會收到這個廣播，悄無聲息重新整理介面。當客戶端使用者失去連線（關閉瀏覽器）時，就會自動發射disconnect事件，服務端就會觸發disconnect事件，並將結果廣播到各個客戶端，客戶端自動重新整理頁面。當用戶unload該頁面時，會觸發leftchat。當客戶端發信息時，就會觸發message事件，將該使用者的訊息傳送到其他人。這個聊天介面的過程就是這樣，很簡單。

接下來我們來看一下客戶端程式碼。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

var popupNotification = $("#notify").kendoNotification({

autoHideAfter: 2000,

height: 60,

stacking: "down"

}).data("kendoNotification");

var socket = io();

var loginUser = sessionStorage.getItem("LoginUser");

if (loginUser == null) {

window.location.href = "/";

return;

}

var userObj = eval("(" + loginUser + ")");

sessionStorage.removeItem('chatUser');

socket.emit("joinchat", userObj);

socket.on('joinchat', function (data) {

if (!sessionStorage.getItem('chatUser')) {

sessionStorage.setItem('chatUser', JSON.stringify({ "user": [] }));

}

var usersObj = JSON.parse(sessionStorage.getItem('chatUser'));

if (usersObj.user.indexOf(data.joinedUser.UserID) == -1) {

usersObj.user.push(data.joinedUser.UserID);

sessionStorage.setItem('chatUser', JSON.stringify(usersObj));

setchartdetail(data);

if (data.joinedUser.UserID != userObj.UserID) {

popupNotification.show('<span style="color:red">' + data.joinedUser.FullName + ' joined in.</span>', 'info');

}

}

});

socket.on('leftchat', function (data) {

var usersObj = JSON.parse(sessionStorage.getItem('chatUser'));

var index = usersObj.user.indexOf(data.leftUser.UserID);

usersObj.user.splice(index, 1);

sessionStorage.setItem('chatUser', JSON.stringify(usersObj));

setchartdetail(data);

popupNotification.show('<span style="color:red">' + data.leftUser.FullName + ' left.</span>', 'warning');

});

當用戶進入這個頁面時，我們發射joinchat，並將當前登入使用者資訊傳送到服務端，服務端再將該使用者資訊以及計算好的使用者總數廣播到各個客戶端。注意這裡我們為了提醒使用者，用到了kendoNotification，效果如下，當有人進入或者離開時，會出現popup提示。

wKiom1eDuAvCnttIAABY1yPLRUA192.png

當用戶離開時，如上，當用戶進入時，如下

wKioL1eDuDbi3mmiAABxPpJdZlM722.png

OK，接下來我們看一下最主要的部分，聊天。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

$("#btn_send").click(function () {

sendmsg();

})

$("#txt_msg").keydown(function (e) {

if (e.keyCode == 13) {

sendmsg();

}

});

function sendmsg() {

var msg = $.trim($("#txt_msg").val());

if (msg) {

var msgObj = { user: userObj, msg: msg };

socket.emit("message", msgObj);

}

$("#txt_msg").val("");

}

上面就是點選SEND按鈕或者文字框回車傳送訊息的程式碼，後臺接到message廣播給客戶端。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

socket.on('message', function (data) {

var msgObj = data;

var userAvatar = '/images/userlogin.png';

if (msgObj.user.UserName == userObj.UserName) {

$("#div_msg").append("<div class='row-margin'>" 

+ "<img src='" + userAvatar + "' style='height:40px;width:40px;right:-660px;position:relative'/>" 

+ "<span style='right:-530px;position:relative'>" + msgObj.user.FullName + "</span>" 

+ "<div class='demo clearfix fr'>" 

+ "<span class='triangle'></span>" 

+ "<div class='article' style='word'>" + msgObj.msg 

+ "</div></div></div>");

db.transaction(function (tx) {

tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');

});

}

else {

$("#div_msg").append("<div class='row-margin'>" 

+ "<img src='" + userAvatar + "' style='height:40px;width:40px;position:relative'/>" 

+ "<span style='left:10px;position:relative'>" + msgObj.user.FullName + "</span>" 

+ "<div class='demo clearfix'>" 

+ "<span class='triangle'></span>" 

+ "<div class='article'>" + msgObj.msg 

+ "</div></div></div>");

db.transaction(function (tx) {

tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');

});

}

var objDiv = document.getElementById("div_msgbody");

objDiv.scrollTop = objDiv.scrollHeight;

});

其實這裡不過是一個拼message的過程，如果傳送者是本人，則訊息靠右顯示，否則靠左顯示。看看James和lilei的聊天。

wKioL1eDvFLChW-nAAEI2Pjo2wY690.png

wKioL1eDvISxYZWoAAEF5YOxGPs308.png

看到了吧，聊天聊的很Happy。OK，上面大家是不是看到了一段類似sql的程式碼，不錯，就是將聊天資訊存到本地WebSQL sqlite資料庫。

1

2

3

db.transaction(function (tx) {

tx.executeSql('INSERT INTO ChatRecords(userId,sendUserId,fullname,content) VALUES("' + userObj.UserID + '","' + msgObj.user.UserID + '","' + msgObj.user.FullName + '","' + msgObj.msg + '")');

});

在使用之前我們需要首先連線資料庫建立表。

1

2

3

4

var db = openDatabase('ChatHistory', '2.0', 'chat records', 10 * 1024 * 1024);

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS ChatRecords (id INTEGER PRIMARY KEY AUTOINCREMENT,userId TEXT NOT NULL DEFAULT "",sendUserId TEXT NOT NULL DEFAULT "",fullname TEXT NOT NULL DEFAULT "",content TEXT NOT NULL DEFAULT "",indate DATETIME default CURRENT_TIMESTAMP)');

});

確實和sqlSever的語法有點像，我們看一下儲存到本地webSQL的聊天記錄，google Chrome，按F12

wKiom1eDvhOAWuv8AAFYusu4uNo881.png

看到了吧，聊天記錄已經被儲存下來，由於我是一臺機器，一個瀏覽器開兩個tab頁，所以這裡的聊天記錄就是兩份，一個是傳送人的，一個是接收人的。大家注意這裡還有張表，sqlite_sequence，我們的主鍵id定義為自增列，所以這張表儲存的是我們的自增列(id)的最大值。

wKioL1eDvwDz8K2YAABqyhD4c2k819.png

最大是54，和我們表ChatRecords中的最大值相等。

相關推薦

Node.js 切近實戰(十一) 之實時通訊

今天我們主要看一下Socket.IO實時通訊，先看一下介面。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

Node.js實戰(十一)之Buffer

JavaScript 語言自身只有字串資料型別，沒有二進位制資料型別。 但在處理像TCP流或檔案流時，必須使用到二進位制資料。因此在 Node.js中，定義了一個 Buffer 類，該類用來建立一個專門存放二進位制資料的快取區。 在 Node.js 中，Buffer 類是隨 Node 核心一起釋出的核心庫

Node.js實操練習(一)之Node.js+MySQL+RESTful

前言 最近學習了一下node.js相關的內容，在這裡初步做個小總結，說實話關於本篇部落格的相關內容，自己很久之前就已經有過學習，但是你懂的，“好記性不如爛筆筒”，學過的東西不做筆記的話，很容易就會忘記的一乾二淨，往往的結果就是自己又要重頭開始學習，這是一個非常痛苦的過程。沒有辦法，為了

【慕課網實戰】Spark Streaming實時流處理項目實戰筆記二十一之銘文升級版

win7 小時 其他 har safari 北京 web 連接 rim 銘文一級： DataV功能說明1）點擊量分省排名/運營商訪問占比 Spark SQL項目實戰課程： 通過IP就能解析到省份、城市、運營商 2）瀏覽器訪問占比/操作系統占比 Hadoop項目：userAg

Node.js實戰(十二)之Stream

Stream 是一個抽象介面，Node 中有很多物件實現了這個介面。例如，對http 伺服器發起請求的request 物件就是一個 Stream，還有stdout（標準輸出）。 Node.js，Stream 有四種流型別： Readable - 可讀操作。 Writable&nb

python學習之網站的編寫（HTML，CSS，JS）（十一）----------如何利用其它html檔案中的CSS（也就是可以將共同的地方提取出來，放大一個檔案中，利於使用）

首先說一下它的具體用處，我們已經知道，當我們寫一個html檔案的時候，不同的標籤想用相同的版式的時候，我們可以將它提取出來，然後再用一些選擇器進行應用，比如class選擇器。但是，但我們編寫多個html檔案中的時候，多個檔案都想用一些相同的版式該怎麼辦呢？ 那麼就引入了這種連線的方式，首先寫一個

Node.js安裝及環境配置之Windows篇

npm安裝 data- 緩存 裏的 環境配置 cmd命令 服務 string ext 1、本機系統：Windows 10 Pro（64位）2、Node.js：v6.9.2LTS（64位） 二、安裝Node.js步驟 1、下載對應你系統的Node.js版本:https:/

劍指offer十一之二進制中1的個數

play blog pre splay 1=1 是把 num 補碼 div 一、題目 輸入一個整數，輸出該數二進制表示中1的個數。其中負數用補碼表示。 二、思路 　　方法一： 用1（1自身左移運算，其實後來就不是1了）和n的

劍指offer二十一之棧的壓入、彈出序列

img 完成 方法 [] 鏈接 span blog 分享 技術分享 一、題目 　　輸入兩個整數序列，第一個序列表示棧的壓入順序，請判斷第二個序列是否為該棧的彈出順序。假設壓入棧的所有數字均不相等。例如序列1,2,3,4,5是某棧的壓入順序，序列4，5,3,2,1是該壓棧序列

劍指offer五十一之構建乘積數組

代碼 [0 題目 鏈接 i+1 元素 使用 不能 參考 一、題目 　　給定一個數組A[0,1,...,n-1],請構建一個數組B[0,1,...,n-1],其中B中的元素B[i]=A[0]*A[1]*...*A[i-1]*A[i+1]*...*A[n-1]。不能使用除法。

Node.js部署到服務器之後臺守護進程管理器Forever

系統 pan 方式 ins start 進入 all 命令 rest 我們不可能直接通過node命令來管理遠程站點，這樣無法保證網站的可持續運行。我們用Forever來解決這個問題，它可以將NodeJS應用以後臺守護進程的方式運行，我們還可以將NodeJS應用設成隨系統啟動

Drool實戰系列(一)之入門程序

sta pil 入門 turn ali The demo print xmlns Drools官網地址為:https://www.drools.org/ maven環境 入門程序例子如下: 項目結構截圖: 一、導入pom文件 <project xml

shiro實戰系列(一)之入門實戰

命令 pattern 角色 一個 保持數據 步驟 會話管理 test 證明 一、什麽是shiro? Apache Shiro 是一個強大而靈活的開源安全框架，它幹凈利落地處理身份認證，授權，企業會話管理和加密。 Apache Shiro 的首要目標是易於使用和理解。安全

node.js小整理（一）

eat 當前目錄 分享 rom js對象 mage 隊列 線程 ima node.js是一個基於Chrome v8引擎的JavaScript運行環境 之前我們編寫的JavaScript代碼都是在瀏覽器中運行的，所以我們可以直接在瀏覽器中敲代碼，然後直接運行。現在學習node

Spring(十一)之AOP

png tag context int logging args illegal org HERE Spring 框架的一個關鍵組件是面向方面的編程(AOP)框架。面向方面的編程需要把程序邏輯分解成不同的部分稱為所謂的關註點。跨一個應用程序的多個點的功能被稱為橫切關註點，這

Node.js 安裝及環境配置之 Windows 篇

per 完成後 reg 瀏覽器中 expressjs ext mod 企業 developer 一、安裝環境 1、本機系統：Windows 10 企業版（64位）2、Node.js：node-v8.9.4-x64.msi（64位） 二、安裝Node.js步驟 1、

kubernetes實戰(十一)：k8s使用openLDAP統一認證

rip ast ops port nmp 更改 create 密碼 lin 1、基本概念 　　為了方便管理和集成jenkins，k8s、harbor、jenkins均使用openLDAP統一認證。 2、部署openLDAP 　　根據之前的文檔，openLDAP使用GFS

機器學習筆記（十九）：TensorFlow實戰十一（多執行緒輸入資料）

1 - 引言 為了加速模型訓練的時間，TensorFlow提供了一套多執行緒處理輸入資料的框架。 下面我們來詳細的介紹如何使用多執行緒來加速我們的模型訓練速度 2 - 佇列與多執行緒 在TensorFlow中，佇列和變數類似，我們可以修改它們的狀態。下面給出一個示例來展示如

設計模式十一之複合模式(不同模式的組合使用Java)

這是我看Head first設計模式書籍之後想要總結的知識點，一方面是對自己學習的東西總結和提煉加強自己的理解和記憶，另一方面是給大家簡化這本書，方便大家快速瞭解各種設計模式。 我想提醒大家的是，設計模式只是前人總結的一些經驗套路，實際上還是要在開發專案中慢慢體會，不可成為

[TensorFlow深度學習入門]實戰十一·用雙向BiRNN(LSTM)做手寫數字識別準確率99%+

[TensorFlow深度學習入門]實戰十一·用雙向BiRNN(LSTM)做手寫數字識別準確率99%+ 此博文是我們在完成實戰五·用RNN(LSTM)做手寫數字識別的基礎上使用BiRNN(LSTM)結構，進一步提升模型的準確率，1000steps準確率達到99%。 首先我們先