socket.io入门

发表于

什么是socket.io

一般说法是socket.io是一个websocket库。不过我更喜欢把他称为一个前后端交互库。因为他不仅封装了websocket的方法，在不支持websocket的浏览器中他会调用其他方法（如轮询，长轮询，iframe流）实现交互。

socket.io的特点

  1. 简易:封装了客户端与服务器端的api。
  2. 跨平台:可以在自己喜欢的平台开发实时应用。
  3. 兼容性:这点开篇已经说过。最低兼容到IE5.5.

简单的部署

服务器端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//与express配合使用
var express=require('express');
var app=express();
var server=require('http').createServer(app);
var io=require('socket.io')(server);
server.listen(1234);
//检测客户端的连接
io.on('connection',function (socket) {
	
	//检测连接来的客户端发送的信息
	socket.on('message',function (msg) {
	})
	
	//向socket客户端发送消息
	socket.send('123');
})

客户端

  • 服务端运行后会在根目录动态生成socket.io的客户端js文件 客户端可以通过固定路径/socket.io/socket.io.js添加引用
  • 客户端加载socket.io文件后会得到一个全局的对象io
  • connect方法可以接受一个url参数，url可以是socket服务的url，也可以是相对路径，如果省略则表示默认连接当前路径 创建index.html文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script src="/socket.io/socket.io.js"></script>>
    <script>
    	
    	var socket=io.connect('/');
    	//监听是否连接成功
    	socket.on('connect',function  () {
    		
    		//连接成功后向服务器发送消息
    		socket.send('123');
    	})
    	//监听是否与服务器断开连接
    	socket.on('disconnect',function  () {
    		
    	})
    </script>

服务端事件汇总

事件名 含义
connection 客户端成功连接到服务器
message 接收到客户端发送的消息
disconnect 客户端断开连接
error 监听错误

客户端事件汇总

事件名 含义
connect 成功连接到服务器
message 接收到服务器发送的消息
disconnect 客户端断开连接
error 监听错误

划分房间

一个服务端可以有很多不同的房间，客户端可以进入不同的房间，在房间内通信不会影响到房间非该房间的客户端

1
2
socket.join('chatroom');   //客户端进入chatroom房间
socket.leave('chatroom');   //客户端立刻chatroom房间

全局广播

服务端发送信息有send和emit方法 事件。其中send方法只有房间内的客户端能监听到。而emit（广播）所有客户端都可以监听到。

1
io.emit('message','全局广播');

send与emit比较

send只是emit封装后的方法
emit源码如下:

1
2
3
4
5
6
7
8
9
Socket.prototype.send = function(){
	//ES6方法，类数组转数组
  var args = toArray(arguments);
  //推入事件名message
  args.unshift('message');
  //执行
  this.emit.apply(this, args);
  return this;
};