理解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. 详解promise、async和await的执行顺序

    1.题目和答案 一道题题目:下面这段promise.async和await代码,请问控制台打印的顺序? async function async1(){ console.log('async1 sta ...

  2. thinkphp链接多个数据库时怎么调用M方法?

    老项目tp3.1.3,有N个数据库,thinkphp好久没用了,不知道怎么用M方法了,代码测验成功! 数据库名称: 2.直接上代码 $custom = M('base','branch_','shop ...

  3. Python 列表增删改查排序统计

    列表的查 a = ["klvchen", "tom", "jack", "james", "lily" ...

  4. Python知识点小记

    类 设置类属性必须使用类对象,若使用实例对象设置,会重新创建一个和类属性同名的实例属性 类对象可调用 类方法&静态方法, 实例对象可调用 实例方法&类方法&静态方法; 类方法和 ...

  5. 【读书笔记】iOS-“一心多用”利用多线程提升性能

    iPhone将具有支持不同类型多线程API的能力,这些API包括:POSIX线程,NSObject,NSThread和NSOperation. iPhone操作系统是一个真正的抢占式,多任务操作系统, ...

  6. React 入门学习笔记整理(五)—— state

    1.state 1)组件本省也是有状态的,定义在组件内部的state中,state的状态只能由组件自身改变,任何其他组件都不能改变. 当需要改变state时,通过调用setState方法来改变,set ...

  7. MSys2安装QT5

    1. MSYS2 shell # pacman –Syuu 2. Reopen MSYS2 # pacman –Syuu 3.添加国内源 msys64\etc\pacman.d 目录下有三个文件 1. ...

  8. TraceView工具的使用

    一.TraceView工具如何使用 TraceView有4种启动/关闭分析方式: (1) 第一种使用方法演示 1. 选择跟踪范围 在想要根据的代码片段之间使用以下两句代码 Debug.startMet ...

  9. 第三方apk内置因签名导致SystemUI未启动启动问题案例分析

    这个问题是刷完机正常开机后,发现手机无状态栏,下拉通知栏,按音量键也无法出现VolumeDialog,开始看到这个现象感觉是systemUI未编译到版本中去?或者是在systemserver中syst ...

  10. 针对模拟滚动条插件(jQuery.slimscroll.js)的修改

    在开发过程中程序员总会碰到产品经理提出的各种稀奇古怪的需求,尽管有些需求很奇葩,但不得不说有些须有还是能指引我们不断的学习与进步,最近在工作中就碰到这种问题.需求是要求在各主流浏览器上使用自定义的滚动 ...