少年,進(jìn)來學(xué)習(xí)開發(fā)socket聊天室吧【上】

先扯淡一下旺上,試想一下瓶蚂,如果有一天公司把私人QQ,微信禁了宣吱,這個時候你如何與外界聯(lián)系窃这??
那么牛逼的我們可以自己搭一個聊天室征候,以下是聊天室搭建全過程杭攻,參照的資料如下:
《node.js權(quán)威指南》
http://nqdeng.github.io/7-days-nodejs/ 七天學(xué)會node.js
http://www.runoob.com/nodejs/nodejs-tutorial.html node.js菜鳥教程
http://www.open-open.com/lib/view/open1402479198587.html socket.io模塊在客戶端和服務(wù)端的應(yīng)用
http://cnodejs.org/ node學(xué)習(xí)的社區(qū)
http://www.cnblogs.com/GumpYan/p/5821193.html http 長連接原理
http://blog.csdn.net/csdnhaoren13/article/details/51034565 Socket.io簡介

以下展示以win7 64位為例。

Node安裝與配置
不喜歡翻墻的下載鏈接如下疤坝,版本肯定不是最新的:
http://nodejs.cn/download/
翻墻的下載鏈接
https://nodejs.org/en/

安裝過程中需要注意兆解,紅框中表示將node命令加入到系統(tǒng)環(huán)境,注意檢查勾選跑揉。


Paste_Image.png

安裝完畢后锅睛,先在cmd中檢測是否安裝完成,出現(xiàn)版本信息代表安裝完成历谍。


Paste_Image.png

之后需要使用npm進(jìn)行node模塊安裝现拒,國內(nèi)速度不行,使用cnpm加速npm扮饶,目前cnpm同步時間間隔為15分鐘 具练,
建議用國內(nèi)鏡像,更換命令如下:
$ npm --registry http://registry.npm.taobao.org info underscore

建立Node第一個應(yīng)用
先確定當(dāng)前開發(fā)目錄為 E:\node_test
下面將用cwd指代 E:\node_test

*** Step1 ***
項(xiàng)目初始化甜无,定義產(chǎn)品信息(版本號扛点,作者,描述等)岂丘,執(zhí)行命令如下
$ npm init
這樣就在工作目錄下生成了package.json

*** Step2 ***
安裝常用模塊
第一步的package.json顯得很有用了陵究,打開它發(fā)現(xiàn)
{ "name": "learning_node", "version": "1.0.0", "description": "app", "main": "http.js", "scripts": { "test": "console,log" }, "keywords": [ "app" ], "author": "Wzq", "license": "ISC", "devDependencies": { "argv": "0.0.2", "express": "^4.14.0" }, "dependencies": { "ejs": "^2.5.5" } }
上圖包含了項(xiàng)目名,版本奥帘,描述铜邮,項(xiàng)目入口,關(guān)鍵詞寨蹋,作者等信息

我們在命令行執(zhí)行
$ npm i http
發(fā)現(xiàn)package.json沒有變化松蒜,但cwd/node_modules中已經(jīng)多了http模塊了
繼續(xù)執(zhí)行
$ npm i http -save
發(fā)現(xiàn)package.json中加了 dependencies,這個指的是產(chǎn)品模式
繼續(xù)執(zhí)行
$ npm i http --save-dev
發(fā)現(xiàn)package.json中加了 devDependencies已旧,這個指的是開發(fā)模式
在第一個應(yīng)用創(chuàng)建成功后秸苗,該package.json可以用于第二個應(yīng)用,直接執(zhí)行npm install會自動搜索并安裝package.json中devDependencies的條目

*** Step3 ***
創(chuàng)建服務(wù)器

在cwd下創(chuàng)建http.js运褪,寫入內(nèi)容:
var http = require( 'http' );//引入http模塊 http.createServer(function (request, response) {//開始監(jiān)聽服務(wù)器 // 發(fā)送 HTTP 頭部 // HTTP 狀態(tài)值: 200 : OK // 內(nèi)容類型: text/html var params = url.parse( request.url, true ).query;//取出請求地址的參數(shù)部分 console.log(request.url); response.writeHead(200, { 'Content-Type': 'text/html; charset=utf8' }); response.write( "ok" );//返回響應(yīng)值 response.end();//關(guān)閉tcp連接 }).listen( 8888, '127.0.0.1' );//監(jiān)聽本地8888端口

// 終端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

在cwd下執(zhí)行
$ node http

Paste_Image.png

打開瀏覽器惊楼,輸入127.0.0.1:8888


Paste_Image.png

如果出現(xiàn)端口被占領(lǐng)的情況玖瘸,請查詢端口使用情況
$ netstat -ano
通過pid找到對應(yīng)進(jìn)程,選擇性關(guān)閉檀咙。

---到這里雅倒,第一個服務(wù)器已經(jīng)搭建完成---

Socket.io初涉獵

首先先了解一下socket.io是什么。
在html5的websocket出現(xiàn)之前弧可,如果要實(shí)現(xiàn)瀏覽器和服務(wù)器的實(shí)時通信蔑匣,大家是這么做的:
1)HTTP 1.1 中 默認(rèn) keep-connection: alive,也就是使一次 TCP 連接中完成多個 HTTP 請求侣诺,但是對每個請求仍然要單獨(dú)發(fā) header殖演,簡單來說
網(wǎng)頁中的多個圖片請求依然是發(fā)多個http請求,但是共用TCP連接年鸳,然后通過不斷向服務(wù)器請求是否有新的數(shù)據(jù)來達(dá)到實(shí)時通信(輪詢polling)
參考資料:http://www.cnblogs.com/GumpYan/p/5821193.html
2)Adobe flash socket (這個還未了解)

WebSocket本質(zhì)上就是一個TCP連接趴久,它解決的第一個問題是,通過第一個 HTTP request 建立了 TCP 連接之后搔确,之后的交換數(shù)據(jù)都不需要再發(fā) HTTP request了彼棍,達(dá)到真正意義上的長連接

下圖是Websocket在各個終端不同版本的兼容性:

Paste_Image.png

為了方便初學(xué)者開發(fā),前人已經(jīng)幫我們解決好了兼容性的問題膳算,于是偉大的Socket.io誕生
Socket.io解決了三件大事情:
1)封裝Websocket協(xié)議座硕,強(qiáng)大的api,操作更方便
2)支持多種輪詢方式涕蜂,萬一瀏覽器不支持Websocket华匾,那么有多種方式可以實(shí)現(xiàn)實(shí)時通信
3)統(tǒng)一了客戶端和服務(wù)端的api,前后端只需要用一套api机隙,方便開發(fā)
參考:http://blog.csdn.net/csdnhaoren13/article/details/51034565

---到這里蜘拉,socket.io的簡介就結(jié)束了---

建立第一個簡單的Socket應(yīng)用
在這一節(jié)中,為了方便后續(xù)功能的擴(kuò)展有鹿,我將用新的方法來創(chuàng)建服務(wù)器

首先是溫習(xí)一下npm install旭旭,這一節(jié)中需要5個模塊
$ npm i fs --save-dev #文件處理模塊 $ npm i socket --save-dev #socket.io模塊 $ npm i express --save-dev #node.js框架 $ npm i path--save-dev #路徑處理模塊 $ npm i http --save-dev #http模塊

服務(wù)端代碼,用于監(jiān)聽127.0.0.1:8888的請求
//[模塊引入] //接觸過grunt的同學(xué)會比較熟悉require葱跋,返回值是modules.export外爆出來的內(nèi)容 var fs = require('fs'); var express = require('express'); var http = require('http'); var io = require('socket.io'); var path = require('path'); // [http托管] //http監(jiān)聽8888端口持寄,再交由socket.io管理 server = express(); http = http.Server(server).listen(8888); io = io(http); //[路由設(shè)置] server.get('/', function(req, res) { var data = fs.readFileSync('./index.html'); res.writeHead(200, { 'Content-type': "text/html" }); res.write(data); res.end(); }); //[socket.io配置] var names = [];// 全部已登錄用戶 io.on('connection', function(socket) { names.push(socket.client.id);// 每個登錄的用戶由socket隨機(jī)生成id io.sockets.emit('login',names);// 每當(dāng)有用戶登錄,guangbo });

客戶端代碼
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>自定義聊天室</title> </head>
<body> <section class="body" id="step2"> <div class="title-bar"> <span>socket聊天室</span> <div class="log-reg"> <div class="log"> <input type="button" id="quit" value="登出" /> 當(dāng)前用戶:<br/> <output id="curUser"></output> <br/> </div> </div> </div> </section> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://localhost:8888/socket.io/socket.io.js"></script> <script> var socket = io.connect(); socket.on('login', function(names) { var str = ''; names.forEach(function(item, index) { str += item + '<br/>'; }) $("#curUser").html(str); }) </script> </body>
</html>

在多個瀏覽器打開localhost:8888娱俺,效果如下:


Paste_Image.png

---到這里稍味,第一個socket應(yīng)用講解已經(jīng)結(jié)束了---

** 下一節(jié)將介紹如何實(shí)現(xiàn)實(shí)時聊天 **


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市荠卷,隨后出現(xiàn)的幾起案子模庐,更是在濱河造成了極大的恐慌,老刑警劉巖僵朗,帶你破解...
    沈念sama閱讀 206,968評論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件赖欣,死亡現(xiàn)場離奇詭異,居然都是意外死亡验庙,警方通過查閱死者的電腦和手機(jī)顶吮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來粪薛,“玉大人悴了,你說我怎么就攤上這事∥ナ伲” “怎么了湃交?”我有些...
    開封第一講書人閱讀 153,220評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長藤巢。 經(jīng)常有香客問我搞莺,道長,這世上最難降的妖魔是什么掂咒? 我笑而不...
    開封第一講書人閱讀 55,416評論 1 279
  • 正文 為了忘掉前任才沧,我火速辦了婚禮,結(jié)果婚禮上绍刮,老公的妹妹穿的比我還像新娘温圆。我一直安慰自己,他們只是感情好孩革,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評論 5 374
  • 文/花漫 我一把揭開白布岁歉。 她就那樣靜靜地躺著,像睡著了一般膝蜈。 火紅的嫁衣襯著肌膚如雪锅移。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,144評論 1 285
  • 那天彬檀,我揣著相機(jī)與錄音帆啃,去河邊找鬼。 笑死窍帝,一個胖子當(dāng)著我的面吹牛努潘,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播坤学,決...
    沈念sama閱讀 38,432評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼疯坤,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了深浮?” 一聲冷哼從身側(cè)響起压怠,我...
    開封第一講書人閱讀 37,088評論 0 261
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎飞苇,沒想到半個月后菌瘫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蜗顽,經(jīng)...
    沈念sama閱讀 43,586評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評論 2 325
  • 正文 我和宋清朗相戀三年雨让,在試婚紗的時候發(fā)現(xiàn)自己被綠了雇盖。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,137評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡栖忠,死狀恐怖崔挖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情庵寞,我是刑警寧澤狸相,帶...
    沈念sama閱讀 33,783評論 4 324
  • 正文 年R本政府宣布,位于F島的核電站捐川,受9級特大地震影響脓鹃,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜古沥,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評論 3 307
  • 文/蒙蒙 一将谊、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧渐白,春花似錦尊浓、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,333評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至襟诸,卻和暖如春瓦堵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背歌亲。 一陣腳步聲響...
    開封第一講書人閱讀 31,559評論 1 262
  • 我被黑心中介騙來泰國打工菇用, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人陷揪。 一個月前我還...
    沈念sama閱讀 45,595評論 2 355
  • 正文 我出身青樓惋鸥,卻偏偏與公主長得像,于是被迫代替她去往敵國和親悍缠。 傳聞我的和親對象是個殘疾皇子卦绣,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評論 2 345

推薦閱讀更多精彩內(nèi)容