理解socket.io(一)---相关的API

1. 什么是Socket.IO?
Socket.IO是node.js的一个模块，它用于浏览器与服务端之间实时通信。它提供了服务器和客户端的组件，只需一个模块就可以给应用程序对webSocket的支持。Socket.IO解决了各个浏览器支持的问题。

2. Socket.IO支持如下方式进行通信，会根据浏览器的支持程度，自动选择使用哪种技术进行通信：

WebSocket

Flash Socket

AJAX long-polling

AJAX multiple streaming

Forever IFrame

JSONP polling

3. Socket.IO的API

// 监听客户端连接，回调函数会传递本次连接的socket

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

// 给所有客户端广播消息

io.sockets.emit('event_name', data); 

// 给指定的客户端发送消息

io.sockets.socket(socketid).emit('event_name', data);

// 监听发送的消息

socket.on('event_name', function(data) {});

// 给该socket的客户端发送消息

socket.emit('event_name', data);

// 给除了自己以外的客户端广播消息

socket.broadcast.emit("event_name", data);

客户端：

1. 建立一个socket连接
var socket = io("ws:///xxxxx");

2. 监听服务消息

socket.on('msg', function(data) {

  socket.emit('msg', {xx: xx1}); // 向服务器发送消息

  console.log(data);

});

3. 监听socket断开

socket.on('disconnect', function(){

  console.log('与服务器断开');

});

4. 监听socket的重连

socket.on('reconnect', function() {

  console.log('重新连接到服务器');

});

客户端socket.on()监听的事件：

connect: 连接成功
connecting: 正在连接
disconnect: 断开连接
connect_failed: 连接失败
error: 发生错误
message: 接收到消息事件
reconnect_failed: 重连失败
reconnect: 重连成功
reconnecting: 正在重连

1-1：给当前的客户端发送消息的demo

下面我们简单的来看一个demo，页面有一个文本域和一个按钮，点击按钮后。
首先需要安装一下 socket.io;
命令行如下：

npm install --save socket.io

以下是项目中package.json，如下：

{

  "name": "socket-demo1",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "socket.io": "^2.1.0"

  },

  "devDependencies": {

    "fs": "0.0.1-security",

    "http": "0.0.0"

  }

}

html代码如下：

<!DOCTYPE html>

<html>

  <head>

    <title>socket.io node.js</title>

    <style>

    </style>

  </head>

  <body>

    <h1>socket.io</h1>

    <form action="#" id="form">

      <textarea id="message" cols="30" rows="10"></textarea>

      <input type="submit" value="send message" id="submit"/>

    </form>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <script>

      var socket = io.connect('http://127.0.0.1:3000');

      var msg = document.getElementById('message');

      var submit = document.getElementById('submit');

      submit.onclick = function(e) {

        socket.emit('msg', {text: msg.value});  // 发生textarea的值给服务器

        return false;

      };

      // 监听msg事件

      socket.on('msg', function(data) {

        console.log(data);

      })

    </script>

  </body>

</html>

app.js代码如下：

var http = require('http');

var fs = require('fs');

var server = http.createServer(function(res, res) {

  fs.readFile('./index.html', function(err, data){

    res.writeHead(200, { 'Content-Type': 'text/html' });

    res.end(data, 'utf-8');

  })

}).listen(3000, '127.0.0.1');

console.log('server running at http://127.0.0.1:3000');

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

io.sockets.on('connection', function(socket) {

  // 侦听客户端的msg事件

  socket.on('msg', function(data) {

    // 给除了自己以外的客户端广播消息

    // socket.broadcast.emit('msg', data);

    // 给当前的客户端发送消息

    socket.emit('msg', data);

  })

});

进入对应的项目，命令行 运行 node app.js， 然后在浏览器下运行 http://127.0.0.1:3000/ 后即可，发送消息后，在控制台看到能监听到消息；

简单代码分析：
首先是通过点击按钮，获取到文本域的值，然后使用 socket.emit('msg', {text: msg.value}); 发送消息，服务器端(也就是app.js)代码内通过
io.sockets.on('connection', function(socket) {}), 该函数能监听客户端连接，然后使用 socket.on('msg', function(data) {}）能监听到客户端的msg事件，
最后通过 socket.emit('msg', data); 给客户端发送消息，最后客户端通过如下代码就能监听服务端回来的消息。

// 监听msg事件

socket.on('msg', function(data) {

  console.log(data);

})

// 因此 整个代码如下：

io.sockets.on('connection', function(socket) {

  // 侦听客户端的msg事件

  socket.on('msg', function(data) {

    // 给当前的客户端发送消息

    socket.emit('msg', data);

  })

})

github查看源码

 1-2: 如果想给除了自己以外的客户端广播消息

可以把上面客户端的代码 socket.emit('msg', data); 改成 socket.broadcast.emit('msg', data);
因此打开浏览器访问http://127.0.0.1:3000，同时打开另一个浏览器或者多个浏览器，浏览http://127.0.0.1：3000，当在第一个标签页的发送消息的时候，在第二个标签页面或其他标签页面的控制台可以看到消息。

1-3：如果想给当前所有的客户端都发送消息的话，需要发送广播消息，代码可以改成如下：

io.sockets.on('connection', function(socket) {

  // 侦听客户端的msg事件

  socket.on('msg', function(data) {

    // 给除了自己以外的客户端广播消息

    socket.broadcast.emit('msg', data);

    // 给当前的客户端发送消息

    socket.emit('msg', data);

  })

});

二.   实现一个简单的计数器来监听服务器上所连接客户端的数量。

思路是：当服务器启动后，计算器是从0开始，当打开浏览器访问http://127.0.0.1:3000后，客户端连接到服务器时它就增加1，当关闭一个浏览器时，它就
减少1。这或是可以理解为 站点实时统计访问者的数据的一个简单的列子吧。

app.js 代码如下：

var http = require('http');

var fs = require('fs');

var count = 0;

var server = http.createServer(function(res, res) {

  fs.readFile('./index.html', function(err, data){

    res.writeHead(200, { 'Content-Type': 'text/html' });

    res.end(data, 'utf-8');

  })

}).listen(3000, '127.0.0.1');

console.log('server running at http://127.0.0.1:3000');

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

io.sockets.on('connection', function(socket) {

  count++;

  console.log("user connected" + count + 'users');

  socket.emit('users', {number: count});

  socket.broadcast.emit('users', {number: count});

  socket.on('disconnect', function() {

    count--;

    console.log('user disconnected' + count + 'users');

    socket.broadcast.emit('users', {number: count});

  });

});

html代码如下：

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8"/>

    <title>socket.io node.js</title>

    <style>

    </style>

  </head>

  <body>

    <h3>socket.io实时监听服务器上所连接客户端的数量</h3>

    <p id="count"></p>

    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <script>

      var socket = io.connect('http://127.0.0.1:3000');

      var count = document.getElementById('count');

      // 侦听users的事件

      socket.on('users', function(data) {

        console.log(data);

        count.innerHTML = data.number;

      });

    </script>

  </body>

</html>

github上查看源码

理解socket.io(一)---相关的API的更多相关文章

  1. socket.io，理解socket.io

    原文:http://www.cnblogs.com/xiezhengcai/p/3957314.html 要理解socket.io ,不得不谈谈websocket 在html5之前,因为http协议是 ...

  2. SOCKET.IO 的用法 系统API，

    原文:http://www.cnblogs.com/xiezhengcai/p/3956401.html 1. 服务端 io.on('connection',function(socket)); 监听 ...

  3. Websocket --socket.io的用法

    <!DOCTYPE html> <html> <head> <title>Hello WebSocket</title> <link ...

  4. socket.io，系统api，

    原文:http://www.cnblogs.com/xiezhengcai/p/3956401.html 1. 服务端 io.on('connection',function(socket)); 监听 ...

  5. koa+mysql+vue+socket.io全栈开发之web api篇

    目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...

  6. socket.io常用api

    1. 服务端 io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',dat ...

  7. socket.io 中文api

    1. 服务端 io.on('connection',function(socket)); 监听客户端连接,回调函数会传递本次连接的socket io.sockets.emit('String',dat ...

  8. node相关--socket.io

    使用Socket.IO可以避免webSocket产生的问题: 传输: Socket.IO中消息的传递是基于传输的,而非全部依靠WebSocket; 它总会尝试选择对用户来说速度最快.对服务器性能来说最 ...

  9. 【socket.io研究】1.官网的一些相关说明，概述

    socket.io是什么? 官网的解释是一个实时的,基于事件的通讯框架,可以再各个平台上运行,关注于效率和速度. 在javascript,ios,android,java中都实现了,可以很好的实现实时 ...

随机推荐

  1. Ubuntu下JDK1.8安装后配置环境变量

    export JAVA_HOME=/dengyang/jdk1.8.0_56export JRE_HOME=$JAVA_HOME/jreexport CLASSPATH=.:$JAVA_HOME/li ...

  2. 设计模式之访问者模式（Visitor ）

    访问者模式是一种将数据操作和数据结构分离的设计模式,可以说是面向数据密集型的一种设计方式,数据的结构相对稳定,有明显的分层和分类,而对数据对象的相关操作进行分组.分析等二次加工,这些操作都是由访问者来 ...

  3. 理解es6中的const与“不变”

    const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动. 效果 对于简单类型的数据(数值.字符串.布尔值),值就保存在变量指向的那个内存地址,因此等同于常量. 对于复合类型 ...

  4. 百度网盘满速下载器：pandownload

    http://pandownload.com/index.html 作者提示:1.软件使用 C++ 编写2.大文件需要等待一段时间才会有下载速度3.文件名含有特殊字符可能会下载出错,请重命名再下载4. ...

  5. 微信小程序踩过的一些坑

    前言 迄今为止,正儿八经的上线了真正意义上的程序,但是这个小程序却着实不小. 之所以不小,是因为这个类似于社区的小程序,已经做了大部分都有的功能了 举例说明,具体的一些功能点: 1.帖子列表页面:会有 ...

  6. 一些关于Viewport与device-width的东西～（转）

    内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html 非常感谢 口口一凡 为我们提供的这篇文章,受益匪浅,特地转到自己的博客收藏起来. 以下是原 ...

  7. FreeSSHD login with permission denied

    登录遇到问题: Permission denied, please try again. 解决方法: 在window中使用freesshd开启ssh后,客户端登陆时报 access denied错误 ...

  8. [iOS]深入理解GCD

    看到一篇很好的文章,本来想翻译的,但发现已经有人翻译了,遂简单整理了一下,方便阅读学习 新博客[wossoneri.com] 什么是GCD GCD(Grand Central Dispatch)是li ...

  9. 利用python中的gensim模块训练和测试word2vec

    word2vec的基础知识介绍参考上一篇博客和列举的参考资料. 首先利用安装gensim模块,相关依赖如下,注意版本要一致: Python >= 2.7 (tested with version ...

  10. nginx的ngx_http_realip_module模块和http头X-Forwarded-For、X-Real-IP

    ngx_http_realip_module模块 realip模块作用:当本机的nginx处于反向代理的后端时可以获取到用户的真实ip.可以让accesslog记录用户真实IP地址. set_real ...