摘要:首先將的包拷貝到你的項目文件下,并在部分使用標簽將其添加進去使用專業的函數創建一個端點當在消息框輸入消息并點擊發送按鈕時,客戶端就將向服務器端發送輸入的消息,消息類型是。
我此前曾發過一遍文章有關于如何利用node.js+websocket搭建一個簡單的多人聊天室有興趣的朋友可以關注我的技術客棧---濤濤技術客棧。今天學習了websocket的一個框架---socket.io后瞬間感覺神清氣爽,頓感從無盡的回調函數中解脫出來,今天我將繼續就多人聊天室這個demo來和大家分享一下如何利用socket.io來創建它。
安裝socket.io所需的包眾所周知,node.js采用了包結構進行管理,所以我們在使用一些模塊(modules)時必須使用npm(install package managment,即安裝包管理工具)安裝socket.io,安裝時仍需安裝在你的node.js中npm的node_modules目錄下,例如在我的電腦中的安裝路徑是這樣的:D:Node.jsnode_modulesnpmnode_modules
最后只有npm install -g socket.io安裝socket.io(必須使用-g進行全局安裝),接下來進行項目的編寫。
創建客戶端客戶端如下:
websocket
【1】
ChatRoom
【2】 var socket = io("ws://localhost:3000");
document.getElementById("sendBtn").onclick = function() { var txt = document.getElementById("sendTxt").value; if(txt){
【3】 socket.emit("message",txt);
} } **socket.on("enter",function(data){
【4】 showMessage(data,"enter");
})** **socket.on("message",function(data){
【5】 showMessage(data,"message");
})** **socket.on("left",function(data){ showMessage(data,"left");
【6】 })**
function showMessage(str,type) { var div = document.createElement("div"); div.innerHTML = str; if(type=="enter"){ div.style.color = "blue"; }else if(type=="left"){ div.style.color = "red"; } document.body.appendChild(div); }
說明:代碼中重要的部分我都進行了加粗并進行編號,下面我們來分析這些重要的代碼。
首先將socket.io的包拷貝到你的項目文件下,并在head部分使用script標簽將其添加進去
使用socket.io專業的函數創建一個websocket端點
當在消息框輸入消息并點擊發送按鈕時,客戶端就將向服務器端發送輸入的消息,消息類型是message。
當有新的用戶進入聊天室時,服務器就會向全部的客戶端廣播這樣一條消息:userxx comes in
當任意一個客戶端向服務器發送消息時,服務器就會將這條消息廣播給全部的客戶端。
當有任一客戶端離開時,服務器就會向全部客戶端廣播這樣一條消息:userxx left
創建服務器端服務器端代碼:
【1】 var app = require("http").createServer()
【2】 var io = require("socket.io")(app)
var PORT = 3000 var clientCount = 0
【3】 app.listen(PORT)
【4】 io.on("connection",function(socket){
clientCount++ socket.nickname = "user"+clientCount
【5】 io.emit("enter",socket.nickname+" comes in")
【6】 socket.on("message",function(str){
**io.emit("message",socket.nickname+" say:"+str)** })
【7】 socket.on("disconnect",function(){
io.emit("left",socket.nickname+" left") }) }) console.log("websocket listening on port:"+PORT)
很顯然使用了socket.io來創建服務器端非常簡潔、方便,大家是不是感覺這代碼看起來就很清爽呀。代碼中的重要部分我都進行了加粗標記及編號處理,下面我跟大家分享一下重要的代碼。
首先我們需要一個綁定使用http協議的變量:app
接下來我們還需要創建一個使用socket.io這個modules的變量并且綁定http變量
這個綁定了http的變量也需要監聽服務器端的端口號
當有一個客戶端與服務器端進行連接時就調用回調函數
接下來當觸發“enter”事件時服務器端向客戶端廣播這樣一條消息:userxx comes in
當有客戶端向服務器端發送消息時就會觸發message事件,這時服務器端向全部客戶端廣播該客戶端向服務器端發送的消息。
當有客戶端關閉時socket.io就會調用自身的disconnect事件,并且向全部客戶端廣播這樣一條消息,userxx left。
以上就是關于我分享使用socket.io來創建一個簡單的多人聊天室的一個小demo,以為大家積極評論。最后附上項目運行的結果截圖及源碼下載地址。
項目源碼地址是:
鏈接:http://pan.baidu.com/s/1qXVhYuo 密碼:2x2c
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91917.html
摘要:首先將的包拷貝到你的項目文件下,并在部分使用標簽將其添加進去使用專業的函數創建一個端點當在消息框輸入消息并點擊發送按鈕時,客戶端就將向服務器端發送輸入的消息,消息類型是。 我此前曾發過一遍文章有關于如何利用node.js+websocket搭建一個簡單的多人聊天室有興趣的朋友可以關注我的技術客棧---濤濤技術客棧。今天學習了websocket的一個框架---socket.io后瞬間感覺...
摘要:免費全網獨家這是一份非常值得珍藏的知識體系一簡述是一個完全由實現基于支持的協議用于實時通信跨平臺的開源框架,它包括了客戶端的和服務器端的。基于實現聊天功能最后,感謝你的到來,恭喜你,堅持到了最后,該文和源碼若有不當之處,請予以斧正。 【免費】全網獨家:這是一份非常值得珍藏的Android知識體系!!! 一、簡述 Socket.IO是一個完全由JavaScript實現、基...
摘要:的總結在一個聊天室系統中,常常使用作為通信的主要方式。服務端對客戶端所發送的請求進行處理登陸驗證等操作在這里,通過來接受客戶端所傳遞的數據,為相同方法名,其后跟的函數為登陸驗證的具體操作,比如用戶驗證是否存在。 websocket的總結 在一個聊天室系統中,常常使用websocket作為通信的主要方式。參考地址:https://www.jianshu.com/p/00e... 關于自...
閱讀 844·2021-11-24 10:44
閱讀 2778·2021-11-11 16:54
閱讀 3160·2021-10-08 10:21
閱讀 2067·2021-08-25 09:39
閱讀 2899·2019-08-30 15:56
閱讀 3459·2019-08-30 13:46
閱讀 3493·2019-08-23 18:09
閱讀 2067·2019-08-23 17:05