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 ...
随机推荐
- sparkStreaming消费kafka-1.0.1方式：direct方式（存储offset到zookeeper）-- 2
参考上篇博文:https://www.cnblogs.com/niutao/p/10547718.html 同样的逻辑,不同的封装 package offsetInZookeeper /** * Cr ...
- Codeforces 868F Yet Another Minimization Problem 决策单调性 (看题解)
Yet Another Minimization Problem dp方程我们很容易能得出, f[ i ] = min(g[ j ] + w( j + 1, i )). 然后感觉就根本不能优化. 然后 ...
- vue-cli 部分浏览器不支持es6的语法-babel-polyfill的引用和使用
npm install --save-dev babel-polyfill babel-polyfill用正确的姿势安装之后,引用方式有三种: 1.require("babel-polyfi ...
- 2018牛客网暑假ACM多校训练赛（第三场）I Expected Size of Random Convex Hull 计算几何,凸包,其他
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round3-I.html 题目传送门 - 2018牛客多校赛第三场 I ...
- P1074 靶形数独 dfs回溯法
题目描述 小城和小华都是热爱数学的好学生,最近,他们不约而同地迷上了数独游戏,好胜的他们想用数独来一比高低.但普通的数独对他们来说都过于简单了,于是他们向 Z 博士请教,Z 博士拿出了他最近发明的“靶 ...
- IDEA控制台问题：At least one JAR was scanned for TLDs yet contained no TLD
参考连接: https://www.cnblogs.com/interdrp/p/7763040.html 1.调整Tomcat对应类的log级别 2.观察Tomcat日志打印信息 3.调整${tom ...
- dubbo spring bean id冲突
service-security-provider应用有provider和consumer配置文件 其中secutrity-consumer引用两个服务 <dubbo:reference int ...
- Debian 9 中设置网络
一.对于有线网络,如果默认没有安装图形界面,进入了 multi-user.target中时,是没有使用NetworkManager管理网络的,此时需要手动配置才能上网 首先得到网卡名称:ip addr ...
- Booksort POJ - 3460 （IDA*）
Description The Leiden University Library has millions of books. When a student wants to borrow a ce ...
- hdu 4725 The Shortest Path in Nya Graph 【拆点】+【最短路】
<题目链接> <转载于 >>> > 题目大意: 每个点放在一层,然后给了n个点,相邻的两层距离是固定的c,有额外m条无向边,然后求1到n的最短路径,如果没有 ...