Coding / Programming Videos

Post your favorite coding videos and share them with others!

Let’s build a simple story by Node.js(2) – Gordon Fang – Medium

Source link

回顧上一篇在HTTP伺服器、Socket.io連線邏輯設計,Socket.io我們定了以上主從連線時要處理的事件,分別是指派匿名、聊天室變更、匿名變更、傳送訊息、離線處理、聊天室處理,下面我們將設計客戶端Javascript設計、socket.io連線。

客戶端Javascript介面設計 (chat.js)- 類別

客戶端訊息發送處理、聊天室更換處理

這邊我們設置好從客戶端發送的請求(request),更換暱稱、聊天室的更換,所以一開始Chat建構子會承接前端連線的socket,類別中的函數成員去做處置,發送事件發射器,讓後端socket.io伺服器,即為第一篇建立的chat_server.js內各個函數,當函數收到事件時做處理。

//客戶端訊息處理函數(chat.js)
sendMessage(room, text){
//宣告變數物件格式,將訊息先包起來
var message = {
room: room,
text: text
};
//客戶端socket message事件發射器,讓chat_server.js中
//handleMessageBroadcasting()函數去廣播到其他客戶端
this.socket.emit('message', message);
}
//伺服端訊息處理函數(chat_server.js)
function handleMessageBroadcasting(socket, nickNames){
//收到message事件請求
socket.on('message',(message)=>{
//廣播到發出請求的聊天室的各個客戶端,並顯示該socket連線的id
socket.broadcast.to(message.room).emit('message',{
text: nickNames[socket.id]+": "+ message.text
});
});
}

這一段是前端使用者在聊天輸入處一開始打/nick或/join,我們就判斷它是命令,將命令取出解析接下來的動作,join是加入新的聊天室命令,nick則是更名的命令,以上程式碼是使用ES6中的Class(類別)語法,不是真的是以類別為基礎(class-based)的物件導向,仍然是以原型為基礎(prototype-based)的物件導向,只是更方便我們編輯開發,換句話來說,Javascript沒有不像C語言、或是Java語言類別型態,必須使用函數擴充其屬性,以下為使用prototype的語法。

var Chat = function(socket) {
this.socket = socket;
};
Chat.prototype.sendMessage = function(room, text) {
var message = {
room: room,
text: text
};

this.socket.emit('message', message);
};

Chat.prototype.changeRoom = function(room) {
this.socket.emit('join', {
newRoom: room
});
};

一開始先變數將Chat函數存起來,類別肯定不會只有一種屬性(本專案),所以我們要為它擴充,所以先打Chat.prototype.(要擴充的屬性名稱),再接上函數。

客戶端Javascript介面設計(chat_ui.js) – JQuery事前處理

我們先定義好訊息發送時,固定都用div標籤包起來,以防XSS攻擊

客戶端訊息/命令判斷

客戶端Javascript介面設計(chat_ui.js) — 客戶端socket.io連線

客戶端socket.io連線
網頁畫面

完整程式碼

https://github.com/gordonfang199649/ChatRoom_by_Node.js

參考文獻

Node.js in Action (Paperback)

An Introduction to WebSockets
https://blog.teamtreehouse.com/an-introduction-to-websockets

WebSocket 教程 http://www.ruanyifeng.com/blog/2017/05/websocket.html

socket.io server API
https://socket.io/docs/server-api/

socket.io client API
https://socket.io/docs/clien-api/

MIME 参考手册http://www.w3school.com.cn/media/media_mimeref.asp#text/html

MDN docs Class https://developer.mozilla.org/zhTW/docs/Web/JavaScript/Reference/Classes

Day 10: ES6篇 — Class(類別) https://ithelp.ithome.com.tw/articles/10185583

[ES6] Javascript 開發者必須知道的 10 個新功能https://medium.com/@peterchang_82818/es6-10-features-javascript-developer-must-know-98b9782bef44

跨網站指令碼
https://zh.wikipedia.org/zh-tw/%E8%B7%A8%E7%B6%B2%E7%AB%99%E6%8C%87%E4%BB%A4%E7%A2%BC

[ASP.NET]Stateful與Stateless
https://dotblogs.com.tw/jimmyyu/2010/10/16/difference-between-stateful-and-stateless

Source link

Bookmark(0)
 

Leave a Reply

Please Login to comment
  Subscribe  
Notify of
Translate »