这两天想回顾自己学过的内容，所以重新写了一下聊天室，就重新写了一个小demo(我也不知道算不算，貌似有点大唉)。目的是为了熟悉和进一步学习WebSocket,通过学习它，我希望能更加了解网络编程。
它大概是这个样子：
你先登陆，就是你先输入自己的名字，点一下按钮，然后，就会出来一个界面：
你可以在write new message 下面输入你想输入的东西，就可以实现即时聊天啦！
这是a先加入聊天室，然后q加入，会再a的界面上有提示。
然后就可以愉快的聊天了
是不是感觉还挺赞的？
好啦，先讲讲什么是WebSocket:
WebSocket的工作流程是这 样的：浏览器通过JavaScript向服务端发出建立WebSocket连接的请求，在WebSocket连接建立成功后，客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接，不需要每次传输都带上重复的头部数据，所以它的数据传输量比轮询和Comet技术小 了很多。我用了一个JavaScript frame ,它是socket.io。socket.io能在Node.js的server端运行并且能运行在浏览器里，它吸收了websockets和其他规范之类，实现了客户端与服务器端的交互。
下面就来实现它吧！
one step 配置环境
Nodejs + webpack + react + express + http + socket.io + socket.io-client
这些npm install 一下喽！对啦，一定要在github上建一个仓库啦！
tow step 想一下数据结构啦
到底使用对象好呢还是使用数组好呢？后来我想着如果最后我要实现私聊的方式的话那我需要一个socket.id，所以我还是使用对象比较好，因此我是这样想的：{'zyn':{'socket':'dZJa6Dl5M2O-tvBjAAAB'},...................},其实'socket'的那个key下的value值是每次相应的socket自己生成的，这样会方便找到一个人喽！key值呢，就是你自己输入的名字了。这样可以实现对应。
three step 服务器端到底怎么弄呢？
它主要是监端口比较重要阿！当你使用express框架的时候，你必须引入socket.io监听是设置的端口，这样它才能够接收到客户端发送过来的消息，或者发送出你想要发给客户端的消息。然后引入可执行的socket.js文件，在这里面写入函数。
four step 发送和接收
其实代码里就主要用了两个方法:发送emit(),监听on();
如果服务器端用了emit(),
socket.emit('add-user',{name: 'ass'});
那么客户端要收到消息的话一定要有监听函数：
socket.on('add-user',function(data){.........});
要注意的是要设置成相同的标识，比如'add-user',才可以接收到相应的消息。可以传递字符串，对象之类。。。接收或发送的数据可以用函数来处理。
反之依然。。
five step react + socket.io怎么搞
其实最开始的时候我自己也搞得很晕，后来思考了之后才发现，react 只是视图层啊!我应该去先把需要呈现给用户的数据处理好然后再呈现到用户眼前的。这一点很重要的！
1.每当一个用户加入了之后，就将该用户的名字添加到对象里面去，这样可以让每个连接该服务器的用户来获知当前的用户量。
2.socket获取的信息是放到state里面设置的值，有的时候是数组，所以要使用组件嵌套才可以。
3.子组件和父组件的函数相互调用也是很重要的!
4.要搞清componentDidMount()的用法。
最后呢，我有看过的几个demo,可供学习：
https://github.com/guille/chat-example.git
https://github.com/socketio/socket.io/tree/master/examples/chat
https://github.com/flashyy/ReactJS-Realtime-Chat
下面是我的代码，求批评指正：
https://github.com/flashyy/mychat
下一次再改成有一对一私聊的啦~好吧，允许我大笑三秒……