這兩天想回顧自己學(xué)過的內(nèi)容，所以重新寫了一下聊天室，就重新寫了一個(gè)小demo(我也不知道算不算，貌似有點(diǎn)大唉)茴扁。目的是為了熟悉和進(jìn)一步學(xué)習(xí)WebSocket,通過學(xué)習(xí)它，我希望能更加了解網(wǎng)絡(luò)編程汪疮。
它大概是這個(gè)樣子：
你先登陸峭火，就是你先輸入自己的名字，點(diǎn)一下按鈕智嚷，然后卖丸，就會(huì)出來一個(gè)界面：
你可以在write new message 下面輸入你想輸入的東西，就可以實(shí)現(xiàn)即時(shí)聊天啦盏道！
這是a先加入聊天室稍浆，然后q加入，會(huì)再a的界面上有提示猜嘱。
然后就可以愉快的聊天了
是不是感覺還挺贊的衅枫？
好啦，先講講什么是WebSocket:
WebSocket的工作流程是這 樣的：瀏覽器通過JavaScript向服務(wù)端發(fā)出建立WebSocket連接的請(qǐng)求朗伶，在WebSocket連接建立成功后弦撩，客戶端和服務(wù)端就可以通過 TCP連接傳輸數(shù)據(jù)论皆。因?yàn)閃ebSocket連接本質(zhì)上是TCP連接，不需要每次傳輸都帶上重復(fù)的頭部數(shù)據(jù)点晴，所以它的數(shù)據(jù)傳輸量比輪詢和Comet技術(shù)小 了很多。我用了一個(gè)JavaScript frame ,它是socket.io粒督。socket.io能在Node.js的server端運(yùn)行并且能運(yùn)行在瀏覽器里陪竿，它吸收了websockets和其他規(guī)范之類，實(shí)現(xiàn)了客戶端與服務(wù)器端的交互屠橄。
下面就來實(shí)現(xiàn)它吧捐康！
one step 配置環(huán)境
Nodejs + webpack + react + express + http + socket.io + socket.io-client
這些npm install 一下嘍庸蔼！對(duì)啦，一定要在github上建一個(gè)倉庫啦贮匕！
tow step 想一下數(shù)據(jù)結(jié)構(gòu)啦
到底使用對(duì)象好呢還是使用數(shù)組好呢姐仅？后來我想著如果最后我要實(shí)現(xiàn)私聊的方式的話那我需要一個(gè)socket.id，所以我還是使用對(duì)象比較好刻盐，因此我是這樣想的：{'zyn':{'socket':'dZJa6Dl5M2O-tvBjAAAB'},...................},其實(shí)'socket'的那個(gè)key下的value值是每次相應(yīng)的socket自己生成的，這樣會(huì)方便找到一個(gè)人嘍敦锌！key值呢，就是你自己輸入的名字了乙墙。這樣可以實(shí)現(xiàn)對(duì)應(yīng)。
three step 服務(wù)器端到底怎么弄呢腥刹？
它主要是監(jiān)端口比較重要阿汉买！當(dāng)你使用express框架的時(shí)候，你必須引入socket.io監(jiān)聽是設(shè)置的端口蛙粘，這樣它才能夠接收到客戶端發(fā)送過來的消息，或者發(fā)送出你想要發(fā)給客戶端的消息穴肘。然后引入可執(zhí)行的socket.js文件，在這里面寫入函數(shù)梢褐。
four step 發(fā)送和接收
?其實(shí)代碼里就主要用了兩個(gè)方法:發(fā)送emit(),監(jiān)聽on();
?如果服務(wù)器端用了emit(),
socket.emit('add-user',{name: 'ass'});
那么客戶端要收到消息的話一定要有監(jiān)聽函數(shù)：
socket.on('add-user',function(data){.........});
要注意的是要設(shè)置成相同的標(biāo)識(shí)赵讯，比如'add-user',才可以接收到相應(yīng)的消息盈咳”咭恚可以傳遞字符串，對(duì)象之類丈积。筐骇。江滨。接收或發(fā)送的數(shù)據(jù)可以用函數(shù)來處理。
反之依然告唆。。
five step react + socket.io怎么搞
其實(shí)最開始的時(shí)候我自己也搞得很暈擒悬，后來思考了之后才發(fā)現(xiàn)稻艰，react 只是視圖層啊!我應(yīng)該去先把需要呈現(xiàn)給用戶的數(shù)據(jù)處理好然后再呈現(xiàn)到用戶眼前的。這一點(diǎn)很重要的尊勿！
1.每當(dāng)一個(gè)用戶加入了之后，就將該用戶的名字添加到對(duì)象里面去拼弃，這樣可以讓每個(gè)連接該服務(wù)器的用戶來獲知當(dāng)前的用戶量摇展。
2.socket獲取的信息是放到state里面設(shè)置的值，有的時(shí)候是數(shù)組咏连，所以要使用組件嵌套才可以。
3.子組件和父組件的函數(shù)相互調(diào)用也是很重要的!
4.要搞清componentDidMount()的用法振惰。
最后呢垄懂，我有看過的幾個(gè)demo,可供學(xué)習(xí)：
https://github.com/guille/chat-example.git
https://github.com/socketio/socket.io/tree/master/examples/chat
https://github.com/flashyy/ReactJS-Realtime-Chat
下面是我的代碼，求批評(píng)指正：
https://github.com/flashyy/mychat
下一次再改成有一對(duì)一私聊的啦~好吧桶蛔，允許我大笑三秒……
