node+socket.io 實現一個聊天室

我們只做簡單的實現,不接入數據庫,nodejs也不使用express和koa等框架 ?

因此依賴只有兩個: 1、socket.io 2、mime(用于獲取靜態資源時獲取文件的mime類型)?

?安裝命令: npm install socket.io mime --save?

?其他的就不贅述了 先描述一下文件目錄結構


靜態 js 和 css 文件放在 public 下面的相應目錄下

socket連接是基于tcp的因此需要給socket傳入一個http服務的實例,這樣就能啟動socket服務

var http = require('http');
var socketio = require('socket.io');
var server = http.createServer();
io = socketio(server);server.listen(3001);
復制代碼

當然,socket.io不止提供了一種啟動方式,這里就不一一列舉了?

?socketio(server) 返回的是一個 socket 實例,通過這個實例可以監聽客戶端的 connection事件,事件監聽的第二個參數是一個回調函數,會掉函數也會返回一個socket對象,這個 socket 對象可以監聽這個鏈接的另一端觸發的事件(這里就是客戶端) ?

這里需要搞清楚的一點是,每個socket連接都會在 connection 事件的回調中返回一個socket 對象,這個對象可監聽對應客戶端觸發的事件,也可以向其他的socket對象廣播消息?

?通過connection 事件返回的 socket 對象觸發和監聽事件:?

io.on('connection', function(socket) {// 監聽客戶端發送的message事件socket.on('message', function() {// 向同一個房間中的其他用戶廣播消息socket.broadcast.to(message.room).emit('message', {text: nickNames[socket.id] + ': ' + message.text});});// 觸發事件socket.emit('message', {nick: 'Lily',content: 'hello world!'});
});
復制代碼

現在我們知道了如何在服務端創建socket 服務,那么客戶端應該應該怎么和服務端的socket服務創建連接呢?

html頁面引入的其他 js 文件這里就不說了,這里需要說明的是socket.io.js:

<script src="/socket.io/socket.io.js"></script>
復制代碼

我剛開始的時候也是很疑惑,因為這個文件在我的服務其中根本不存在。事實是,這個文件是socket 服務器啟動后自動生成的。因此我們只需要在html文件中按照這個路徑引入就行了。?

引入socket.io.js 后就會有一個全局的 io 對象,用于觸發事件和監聽服務器 socket 服務器觸發的事件 客戶端事件監聽:

var socket = io.connect();$(document).ready(function() {// 監聽服務器發送的事件socket.on('message', function(message) {var newElement = $('<div class="msg-box"></div>').append($('<span></span>').text(message.text));$('#messages').append(newElement);});});
復制代碼

客戶端觸發事件:

socket.emit('message', {nick: 'Lily',content: 'yes! I hear you now'
});
復制代碼

message可以是對象也可以是字符串

這樣建立連接設置監聽后就可以和服務端通過事件進行通信了

服務端監聽到客戶端發來的消息后向該房間所有用戶廣播消息:

socket.broadcast.to(currentRoom[socket.id]).emit('message', {text: previousName + ' 現在已更名為 ' + name + '.'
});
復制代碼

結合以上描述的這些方法,就能完整搭建一個聊天室了,關于前端頁面的結構和頁面事件的邏輯我這里就不詳細說了

我把我的demo放到了github上,有興趣的同學可以看看:github.com/SailorCai/n…






本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/537216.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/537216.shtml
英文地址,請注明出處:http://en.pswp.cn/news/537216.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

安卓應用用戶數據_用戶指標數據應用

一、如何理解數據用戶數據&#xff1a;gender:性別、 birthday:出生日期行為數據&#xff1a;user_id:用戶id、auction_id:購買行為編號、buy_mount:購買數量、day:購買時間商品數據&#xff1a;cat_id:商品種類ID、cat1:商品類別、property:商品屬性二、用戶數據指標1.用戶數據…

三大數據庫數據庫端口號及連接jdbc驅動下載

Jdbc連接三大數據庫&#xff08;mysql sqlserver oracle&#xff09; Mysql:端口號為&#xff1a;3306&#xff08;默認&#xff09; 用java連接mysql數據庫 Try{Class.forName(“com.mysql.jdbc.Driver”); //DatabaseName:需要連接的數據庫名稱 String url”jdbc:mysql://12…

webgis從基礎到開發實踐_開源WebGIS教程系列——11.1 GISLite 的開發背景與設計

地理信息門戶可以幫助人們更容易地發現、訪問和使用地理空間信息&#xff0c; 是地理信息發布、服務和共享的重要環節。許多國家都很重視地理信息門戶的 建設&#xff0c;把它作為國家空間數據基礎設施(spatial data infrastructure&#xff0c;SDI)的重要組成部分。GISLite 是…

Oracle數據庫及在DOS命令下面的簡單操作

在Oracle數據庫注釋用--表明為注釋&#xff0c;但以下用//或--代表解釋;數據庫不怎么區分大小寫&#xff1b; 先說說一些簡單Oracle數據庫操作的語句&#xff1a; 使用語句創建普通用戶&#xff1a; Create user username identified by password; //創建普通用戶 Grant reso…

CSS屬性(display)

1.display屬性 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><title>08display屬性</title><style>.c1 {background-color: red;/*display: none; !* 讓其在頁面上不顯示 *!*//*display: i…

產品發布系統_【產品發布】第3期|閥門遙控系統

更多精彩&#xff0c;請點擊上方藍字關注我們&#xff01;常熟瑞特電氣股份有限公司的閥門遙控系統是一款經典的產品線&#xff0c;包括了全系列的液壓執行器&#xff0c;電液執行器&#xff0c;微型動力單元&#xff0c;液壓動力泵站&#xff0c;液壓電磁閥箱等產品。閥門遙控…

大數據就業前景,分析的太到位了

大數據廣泛應用于電網運行、經營管理及優質服務等各大領域&#xff0c;并正在改變著各行各業&#xff0c;也引領了大數據人才的變革。大數據就業前景怎么樣&#xff1f;這對于在就業迷途中的我們是一個很重要的信息。 隨著大數據時代的到來【這次國家教育部也改革動真格了】&am…

常用集合(List,Set,Map)的基本定義和操作

集合類存放于java.util包中。 集合類存放的都是對象的引用&#xff0c;而非對象本身&#xff0c;出于表達上的便利&#xff0c;我們稱集合中的對象就是指集合中對象的引用&#xff08;reference)。 常用的集合類型主要有3種&#xff1a;set(集&#xff09;、list(列表&#x…

多麥克風做拾音的波束_麥克風丨人聲應該用動圈話筒還是電容話筒?

無論是在您最喜歡的樂隊的紀錄片中&#xff0c;還是在電影中那些有關錄音棚里的場景中&#xff0c;似乎都存在著一個共同的主題&#xff0c;那就是&#xff1a;歌手們都在使用大振膜的電容麥克風進行錄音。我知道人們應該從別人的經驗中汲取精華&#xff0c;事半功倍。但是我并…

MYSQL安裝與庫的基本操作

mysql數據庫 什么是數據庫 # 用來存儲數據的倉庫 # 數據庫可以在硬盤及內存中存儲數據 數據庫與文件存儲數據區別 數據庫本質也是通過文件來存儲數據, 數據庫的概念就是系統的管理存儲數據的文件 數據庫介紹 數據庫服務器端: 存放數據的主機集群數據庫端: 可以連接數據庫的任意…

java框架mybatis配置文件總結一

先新建個java EE的項目 該配置文件必須在src的目錄下面&#xff0c; 新建一個xml 文件&#xff1a; 建完后發現它會自動建在web目錄下面&#xff0c;我們把這個文件移到src目錄下面&#xff1a; &#xff08;注&#xff1a;對了&#xff0c;該文件的編碼最好用utf-8的no bom,…

python第六周實驗_第六周實驗四

二.實驗的內容(1)根據下面的要求實現圓類Circle。1.圓類Circle的成員變量&#xff1a;radius表示圓的半徑。2.圓類Circle的方法成員&#xff1a;Circle():構造方法&#xff0c;將半徑置0Circle(double r)&#xff1a;構造方法&#xff0c;創建Circle對象時將半徑初始化為rdoubl…

測試:脫離VS2010使用自動化測試時出現 6DA215C2-D80D-42F2-A514-B44A16DCBAAA 錯誤

在前一系列IronRuby中一直是圍繞這UI自動化測試來寫的&#xff0c;今天基本測試框架完成了&#xff0c;測試人員沒有安裝VS2010&#xff0c;不知道能否跑&#xff0c;所以就在測試人員機器上跑跑看&#xff0c;但是問題就出現了 現象 運行run.bat跑單元測試時&#xff0c;出現以…

Linux的遠程連接及Linux系統下Tomcat部署

Linux的遠程需要用的軟件有Xshell&#xff0c;Xftp 本人使用VMware12Pro虛擬機&#xff0c;Linux系統為CentOS7&#xff0c;使用局域網進行遠程連接 Xshell和Xftp沒有安裝的話可以取官網下載&#xff0c;但Xshell需要驗證信息&#xff0c;所以也可以去360電腦軟件下載 在VMw…

uniapp圖標_uniapp擴展自定義uniIcon組件圖標

1、訪問Iconfont-阿里巴巴矢量圖標庫&#xff0c;下載自己想要的圖片&#xff0c;下載svg格式備用2、通過百度字體編輯器打開本地最新的uni.ttf文件(http://fontstore.baidu.com/static/editor/index.html#)&#xff0c;打開之后可以看到所有的uni所有圖標都在里面3、導入第一步…

asp.net面試集合

1 &#xff1a;維護數據庫的完整性、一致性、你喜歡用觸發器還是自寫業務邏輯&#xff1f;為什么 答&#xff1a;盡可能用約束&#xff08;包括CHECK、主鍵、唯一鍵、外鍵、非空字段&#xff09;實現&#xff0c;這種方式的效率最好&#xff1b;其次用觸發器&#xff0c;這種方…

Spring Boot 日志的使用及logback.xml的使用

當前是市場上使用的日志框架有很多&#xff0c;比如&#xff1a;JUL、JCL、Jboss-logging、logback、log4j、slf4j....等等&#xff1b; 但是日志主要分為兩類&#xff0c;日志門面和日志實現兩類&#xff1b;日志門面可以說是日志框架的抽象層&#xff0c;主要實現是的日志實…

基4fft算法的蝶形圖_原地且自動整序的FFT算法

傳統的計算快速傅里葉變換的Cooley-Tukey算法效率極高&#xff0c;因其主要由蝶形運算構成&#xff0c;所以代碼形式也非常簡單&#xff0c;只是需要將輸入或者輸出按照位反轉的方式重新排序。這個重新排序的步驟并不是必須的。Clive Temperton于1991年在Self-Sorting In-Place…

嵌入式BootLoader技術內幕(二)

三、Boot Loader 的主要任務與典型結構框架 在繼續本節的討論之前&#xff0c;首先我們做一個假定&#xff0c;那就是&#xff1a;假定內核映像與根文件系統映像都被加載到 RAM 中運行。之所以提出這樣一個假設前提是因為&#xff0c;在嵌入式系統中內核映像與根文件系統映像也…

MongoDB數據庫的遷移

最近公司開始要換服務器啦&#xff0c;MongoDB上面的數據又得遷移&#xff0c;還是記錄一下比較好。 1&#xff09;、將MongoDB的壓縮包解壓至相對應的路徑(壓縮文件在本地服務器的地址192.168.0.22的/opt/zip文件下面) 2&#xff09;、配置好mongodb.conf文件&#xff0c;配…