干货 | 使用socket.io实现WebSocket即时通讯

1

Socket和TCP/IP协议的关系

Socket是应用层与TCP/IP协议族通信的中间软件抽象层，它是一组接口。在设计模式中，Socket其实就是一个门面模式，它把复杂的TCP/IP协议族隐藏在Socket接口后面，对用户来说，一组简单的接口就是全部，让Socket去组织数据，以符合指定的协议。

2

Socket.io

Socket.io封装了WebSocket，同时包含了其它的连接方式，比如Ajax。原因在于不是所有的浏览器都支持WebSocket，通过Socket.io的封装，你不用关心里面用了什么连接方式,在任何浏览器里都可以使用Socket.io来建立异步的连接。Socket.io包含了服务端和客户端的库，如果在浏览器中使用了Socket.io的js，服务端也必须同样使用。如果你很清楚你需要的就是WebSocket，那可以直接使用WebSocket。

3

Socket.io常用api

client

var socket = io.connect(host,options);

　　io.on

　　

　　当Socket与服务器成功建立连接后

　　-> connect : socket.on('connect',function(){});

　　socket正在与服务器建立连接

　　-> connecting : socket.on('connecting',function(){});

　　当与服务器断开连接

　　-> disconnect : socket.on('disconnect',function(){});

　　与服务器连接失败

　　-> connect_failed : socket.on('connect_failed',function(){});

　　当一个错误发生而且不能被处理

　　-> error : socket.on('error',function(){});

　　服务器响应并返回到客户端的数据

　　-> message : socket.on('message',function(message,[callback]){});

　　除了保留的事件之外的任意事件

　　-> anything : socket.on('anything',function(data,[callback]){});

　　重新连接失败

　　-> reconnect_failed : socket.on('reconnect_failed',function(){});

　　重新连接成功

　　-> reconnect : socket.on('reconnect',function(){});

　　重新连接中

　　-> reconnecting : socket.on('reconnecting',function{});

server

var io = require('socket.io');

　　io.on

　　初始化一个socket

　　->connection : io.on('connection',function(socket){});

　　接受客户端send()方法发送过来的数据

　　->message : io.on('message',function(message,callback){});

　　除了保留的事件之外的任意事件

　　->anything : io.on('anything',function(data){});

　　中断Socket链接

　　->disconnect : io.on('disconnect',function(){});

4

客户端建立Socket连接，发送事件传递信息

通过npm进行安装，命令：npm install socket.io

安装后在node_modules文件夹下新生成了一个socket.io文件夹，引用里面的socket.io.js文件到HTML上，就可以使用socket.io与服务器进行通信了。

　　示例如下

<script src='/socket.io/socket.io.js'></script>

<script type='text/javascript'>
var socket=io.connect(),//与服务器进行连接

　　button=document.getElementById('Btn');
button.onclick=function(){

　　//发送一个名为foo的事件，并且传递一个字符串数据‘hello’

　　socket.emit('foo', 'hello');
}
</script>

５

服务器端接收和处理事件

var express = require('express'),

　　app = express(),
　　server = require('http').createServer(app),
　　io = require('socket.io').listen(server); //绑定到服务器

app.use('/', express.static(__dirname + '/www'));

server.listen(80);

//socket部分
io.on('connection', function(socket) {

　　//接收并处理客户端发送的foo事件
　　socket.on('foo', function(data) {

　　　　console.log(data); //将消息输出到控制台

　　})
});

６

简单聊天室

对上述过程进行扩展，客户端把事件内容换成用户id加实时发送的内容，服务器端接收后中转，发送给客户端，就可以实现多用户的实时聊天窗口。

源码：https://github.com/willworks/nodeChat

在线地址：http://112.74.83.68:8080

大师心得，一网打尽

前沿技术，最佳实践

打造高品质技术分享会

聚合唯品会前端精英

等你加入

前端俱乐部

微信号：vip_fe_club

RTX：谢骏奇-蕉皮

微信群：FE_Club 唯品大前端