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 ...
随机推荐
- python全栈开发day59-Django基础
一.今日内容总结 1.HTTP协议: 请求:浏览器发给服务端的消息 格式: 请求方法 URL 协议版本\r\n k1: v1\r\n k2: v2\r\n \r\n 请求体(请求数据) 响应:服务端返 ...
- Python_面向对象_类2
类的几个装饰器方法: @classmethod (类方法):使之无法访问实例变量 class Animal(object): def __init__(self, name): self.name = ...
- Codeforces 765F Souvenirs 线段树 + 主席树 (看题解)
Souvenirs 我们将询问离线, 我们从左往右加元素, 如果当前的位置为 i ,用一棵线段树保存区间[x, i]的答案, 每次更新完, 遍历R位于 i 的询问更新答案. 我们先考虑最暴力的做法, ...
- Codeforces 915G Coprime Arrays 莫比乌斯反演 (看题解)
Coprime Arrays 啊,我感觉我更本不会莫比乌斯啊啊啊, 感觉每次都学不会, 我好菜啊. #include<bits/stdc++.h> #define LL long long ...
- BZOJ4566 [Haoi2016]找相同字符 字符串 SAM
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ4566.html 题目传送门 - BZOJ4566 题意 给定两个字符串 $s1$ 和 $s2$ ,问有 ...
- Cyclic Nacklace hdu3746 kmp 最小循环节
题意:给出一段字符串 求最少在最右边补上多少个字符使得形成循环串(单个字符不是循环串) 自己乱搞居然搞出来了... 想法是: 如果nex[len]为0 那么答案显然是补len 否则 答案为循环 ...
- Zookeeper安装使用
一:zookeeper介绍 Zookeeper 分布式协调组件.本质一个软件. Zookeeper常用功能 1 发布订阅功能.把zookeeper当作注册中心原因. 2 分布式/集群管理功能. 使用j ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
- 给有C或C++基础的Python入门 ：Python Crash Course 5 if语句
本章就是Pyhon版的 if语句.原理大家都懂,就不一一说说明了. 值得注意的两点: 1. 在每个if类语句结尾必须加上符号“:”. 2. 注意,在python中是否缩进代表与上一行代码是否有关. 下 ...
- Change position in observation
HTML <!DOCTYPE HTML> <HTML> <head> <meta charset=" UTF-8"> <tit ...