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 ...
随机推荐
- 伪分布式hbase从0.94.11版本升级stable的1.4.9版本
Hbase从0.94.11升级到stable的1.4.9版本: 升级思路: hadoop1.1.2 hbase 0.94.11 ↓ had ...
- 将程序sublime添加到右键菜单中
新建wangzhaobo.bat复制一下代码, 粘贴保存,然后打开. @echo Off :START CLS echo *====================================== ...
- 配置windows批处理脚本(.bat)文件路径 | window批处理文件配置执行路径
以PHP的composer为例 1 . 路径D:\phpStudy\php\php-5.5.38加入环境变量 2.在路径D:\phpStudy\php\php-5.5.38新建composer.bat ...
- Ubuntu18.04上安装java
安装java8 sudo add-apt-repository ppa:webupd8team/javasudo apt-get updatesudo apt-get install oracle-j ...
- lamp源码安装
先从Apache开始装->MySQL->PHP PHP在编译的时候需要用到MySQL的一些参数,需要用到Apache的参数. 准备工作: 1.查看系统中是否有自带的Apache 如果提示你 ...
- ORA-01000: maximum open cursors exceeded
网上搜索了一下,找到了原因根源: 使用Oracle数据库的时候,经常会碰到有ORA-01000: maximum open cursors exceeded的错误.实际上,这个错误的原因,主要还是代码 ...
- Windows下的Hadoop安装（本地模式）
时隔许久的博客.. 系统为Windows 10,Hadoop版本2.8.3. 虽然之前已经在Linux虚拟机上成功运行了Hadoop,但我还是在Windows上编码更加习惯,所以尝试了在Window上 ...
- LR逻辑回归文章
http://blog.csdn.net/suipingsp/article/details/41822313
- 【DWM1000】 code 解密1一 去掉Main 函数多余内容
蓝点DWM1000 模块已经打样测试完毕,有兴趣的可以申请购买了,更多信息参见 蓝点论坛 正文: 室内定位兴起,DWM1000 作为超宽带UWB的代表,在国内用的越来越多,但是可见资料非常少. 一方面 ...
- 潭州课堂25班：Ph201805201 django 项目 第三十九课 后台 文章发布，图片上传到 FastDFS后端实现 七牛云讲解（课堂笔记）
文章发布: # 1,从前台获取参数# 2,校验参数# 3,把数据保存到数据库# 4,返回执行结果到前台,(创建成功或失败) 自定义 froms.py 校验参数 上传图片到七牛云 注册 https:// ...