Socket.IO学习之基础入门
原文：http://blog.csdn.net/weichuang_1/article/details/48831957
这里贴出Socket.IO官网
一.Socket.IO的介绍
Socket.IO支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。
- 实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
- 实时通信和聊天：只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。
- 二进制流传输：从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
- 文档合并：允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。
官方上提供了三个demo：多人聊天室、多人玩游戏、远程控制电脑。大家可以去官网试一试。
二.写一个聊天应用
在这个教程中，我们将创建一个基本的聊天应用，它基本不需要你拥有一点的Node.js或者Socket.IO的知识，所以它适合所有级别的开发者。
1.介绍：
使用流行的web应用程序栈，例如LAMP (PHP)，写一个聊天应用是非常困难的。它会涉及到轮询服务器的更改，跟踪时间戳，并且它运行的比较慢。
套接字通常支撑着大多数实时聊天系统的架构，提供了在服务器和客户端之间双向通信的通道。
这意味着服务器可以向客户端推送消息，无论你何时写一个聊天消息，主意就是服务器将会得到这个消息，并将这个消息推送给连接到服务器的其他客户端。
2.web框架
第一步是搭建一个简单的HTML网页，该网页提供了一个表单和一系列消息。我们将使用node.js的web框架Express，确保Node.js已经被安装了。
首先创建一个package.json文件，来描述我们的工程，我建议你把它放在一个空的目录中(我叫它chat-example)，
{
"name": "socket-chat-example",
"version": "1.0.0",
"description": "my first socket.io app",
"main": "index.js",
"scripts": {
"test": "start index.js"
},
"author": "",
"license": "ISC"
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
现在，为了将我们需要的东西安装在依赖项中，我们使用这个命令：
npm install --save- 1
- 1
现在，我们安装一下Express：
$ npm install --save express- 1
- 1
既然express已经被安装好了，我们可以创建一个index.js文件来来设置应用。
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这将会做三件事件：
- Express将
app初始化成一个函数处理器，你可以将其提供给一个HTTP服务器(看第二行) - 我们定义一个路由处理器，当我们访问网站主页时，这个处理器就会被调用。
- 我们让这个http服务器监听3000端口。
如果你运行node index.js，你会看到下面的图示：
3.提供HTML
到目前为止，在index.js文件中，我们调用了res.send()这个方法，并将HTML类型的字符串传递给它。如果把整个应用的HTML放在那儿的话，我们的代码看起来会非常奇怪。相反，我们将会创建一个index.html文件，并提供它。
我们使用sendFile()方法来重构路由处理器：
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});- 1
- 2
- 3
- 1
- 2
- 3
使用以下的代码来填写index.html文件：
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
如果你重启这个进程，然后重新刷新页面，看起来是这样的：
4.集成Socket.IO
Socket.IO由两部分构成：
socket.io：一个服务器，集成了Node.JS的HTTP服务器socket.io-client：一个客户端库，在浏览器端加载
在开发期间，socket.io会自动为我们提供客户端，所以现在我们只需安装一个模块：
npm install --save socket.io- 1
- 1
这个命令会安装socket.io模块，并将依赖项添加到package.json文件中，现在我们在index.js添加一些代码：
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendfile('index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
注意到，我传递了一个http(HTTP Server)对象来创建一个新的socket.io实例，然后，为即将来到的套接字监听connection事件，我会将其打印到控制台中。
现在，我在index.html文件中，在</body>之前添加了以下的代码段：
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
上面的代码段会加载socket.io-client，它暴露了io这个全局变量，然后进行连接。
注意到，我在调用io()的时候，并没有声明任何URL，因为它默认是尝试连接提供网页的主机。
如果你现在重新加载服务器和网页，你会发现控制台会打印“a user connected”。尽力打开几个标签，你会发现控制台会打印出多个消息。
每个socket也会发射特殊的disconnect事件：
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
如果你多次刷新一个标签的话，你会马上看到：
5.发射事件
Socket.IO背后的思想是你可以发射和接收你想要的任何事件，携带你想要的任何数据。任何能够被转换成JSON的对象都能这样做，包括二进制数据。
让我们实现一个效果，当用户输入一条消息时，服务器会把它当作是一个chat message事件，index.html中script(脚本)部分应当是这样了：
在index.js中，我们打印出chat message事件：
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
6.广播
接下来我们打算使用服务器来向其他的客户端发射事件，为了能够向每个人都发射事件，Socket.IO为我们提供了io.emit()方法：
io.emit('some event', { for: 'everyone' });- 1
- 1
如果你想要发送消息给每个人，除了某个特定的套接字，我们有broadcast标识：
io.on('connection', function(socket){
socket.broadcast.emit('hi');
});- 1
- 2
- 3
- 1
- 2
- 3
这个例子中，为了简洁性，我们将把消息发送给任何人，包括发送的客户端：
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
在客户端，当捕获到chat message事件的时候，我们会将它展示在页面上，整个客户端的JavaScript代码如下面所示：
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
至此，我们的聊天应用已经完成了，大约20多行代码。
你可以在这里获得源代码。
$ git clone https://github.com/guille/chat-example.gitSocket.IO学习之基础入门的更多相关文章
- 安装虚拟机以及学习Linux基础入门
安装虚拟机 参考基于VirtualBox虚拟机安装Ubuntu图文教程完成了虚拟机的安装,主要遇到了以下2个问题 在新建虚拟电脑的时候,如果类型选择了Linux,则版本就只能选择Ubuntu(32 位 ...
- nodejs的socket.io学习笔记
socket.io学习笔记 1.服务器信息传输: 2.不分组,数据传输: 3.分组数据传输: 4.Socket.io难点大放送(暂时没有搞定): 服务器信息传输 1. // send to curre ...
- VS2013中Python学习笔记[基础入门]
前言 在上一节中简单的介绍了在VS2013中如何进行开发Hello World,在VS2013中进行搭建了环境http://www.cnblogs.com/aehyok/p/3986168.html. ...
- 在学习linux基础入门时的一些问题总结（1）
本周在实验楼完成了<linux基础入门>的21个实验,虽然之前已经学习过linux的相关课程,对linux下的命令也有一些了解和实践,但完成这21个实验以及35个练习题仍然遇到了许多的问题 ...
- python学习之基础入门,安装,字符串,数据转换,三元运算符
python基础 我们要开始学习新的编程语言了,加油~~ python是“世界上最好的语言”,学习它当然是认为它是最好的所以我们才学(人生苦短我学python),python运用于不同的领域,采集分析 ...
- Redis学习一(基础入门).
一.前言 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的日志型.key-Value 的数据库.并提供多种语言的API. 通常,Redis 将数据存储于 ...
- C#学习笔记---基础入门(三)
泛型<T> 使用泛型能够最大限度的重用代码/保护类型安全,提高性能 泛型成员因为类型的不确定性,不能使用算术运算符/比较运算符 类型参数可以有多个,可以是编译器能够识别的任何类型 类型参数 ...
- C#学习笔记---基础入门(二)
枚举 枚举是被命名的整型常数的集合:枚举类型的变量只有赋值后才能使用:不同枚举中的枚举值可以重名:可以自定义枚举值. enum Playstates { 跑, 跳,下滑,左转,右 ...
- C#学习笔记---基础入门（一）
C#中的变量: 一个变量就是存储区(内存)中的一个存储单元. 变量声明赋值:int money =1000;/int money;money=1000; 输出:console.writeLine(mo ...
随机推荐
- Maya cmds pymel 快速选择hard edges(硬边)
Maya cmds pymel 快速选择hard edges(硬边) import maya.cmds as cmds cmds.polySelectConstraint(m = 3, t = 0x8 ...
- js判断上传图片文件大小，尺寸，格式
/** * 文件宽高 * @param eventId id * @param w 宽度 * @param h 高度 * @param callback 回调函数这里判断图片像素的方法是异步的,所以需 ...
- scrapy 手动编写模板
import scrapy class Tzspider(scrapy.Spider): # spider的名字,唯一 name = 'tz' # 初始url列表 start_urls = ['htt ...
- Jenkins使用遇到的问题总结
学新技能最方便的就是在网上找教程了,我找到一个还不错的易百教程 Jenkins教程 别看教程写了一堆,其实真正用到的没多少.后面的自动化测试,服务器维护啥的,等用到的时候再深入研究吧 No1: 按照教 ...
- 【python】常用内建模块
[datetime] No1: 获取当前时间 No2: 时区转换 >>> from datetime import datetime, timedelta, timezone > ...
- POJ 2155 Matrix 【二维树状数组】(二维单点查询经典题)
<题目链接> 题目大意: 给出一个初始值全为0的矩阵,对其进行两个操作. 1.给出一个子矩阵的左上角和右上角坐标,这两个坐标所代表的矩阵内0变成1,1变成0. 2.查询某个坐标的点的值. ...
- html5手势操作与多指操作封装与Canvas图片裁切实战
当前情况,移动端的开发占比越来越高,单指的拖拽触碰等操作是常规需要.特殊的多指操作与手势操作还需另做处理,而且还涉及到兼容性问题. // 屏幕上存在两根或两根以上的手指 时触发 仅IOS存在手势事件, ...
- ASP.NET MVC 常用路由总结
1.URL模式 路由系统用一组路由来实现它的功能,这些路由共同组成了应用系统URL架构或方案,这种URL架构是应用程序能够识别并能对之做出响应的一组URL,当处理一个输入 请求时,路由系统的工作是将这 ...
- 用户不在sudoers文件中，此事将被报告
在给Virtual Box搭配共享文件夹后,普通用户使用sudo时,报错XX不在sudoers文件中.此事将被报告 然后我就按照网上教程,不巧的是正好用错误的教程修改了sudoers文件,造成root ...
- format 用法
hon2.6开始,新增了一种格式化字符串的函数str.format(),可谓威力十足.那么,他跟之前的%型格式化字符串相比,有什么优越的存在呢?让我们来揭开它羞答答的面纱.语法 它通过{}和:来代替% ...