Socket.IO学习之基础入门

时间 2019-11-29

标签 socket.io socket 学习基础入门栏目系统网络繁體版

原文原文链接

【转载理由：适合Socket.IO入门(需nodejs express基础)】
javascript

摘自http://blog.csdn.net/weichuang_1/article/details/48831957php

这里贴出Socket.IO官网css

一.Socket.IO的介绍html

Socket.IO支持及时、双向与基于事件的交流。它能够在每一个平台、每一个浏览器和每一个设备上工做，可靠性和速度一样稳定。java

实时分析：将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。
实时通讯和聊天：只需几行代码即可写成一个Socket.IO的”Hello,World”聊天应用。
二进制流传输：从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。
文档合并：容许多个用户同时编辑一个文档，而且可以看到每一个用户作出的修改。

官方上提供了三个demo：多人聊天室、多人玩游戏、远程控制电脑。你们能够去官网试一试。node

二.写一个聊天应用git

在这个教程中，咱们将建立一个基本的聊天应用，它基本不须要你拥有一点的Node.js或者Socket.IO的知识，因此它适合全部级别的开发者。github

1.介绍：web

使用流行的web应用程序栈，例如LAMP (PHP)，写一个聊天应用是很是困难的。它会涉及到轮询服务器的更改，跟踪时间戳，而且它运行的比较慢。express

套接字一般支撑着大多数实时聊天系统的架构，提供了在服务器和客户端之间双向通讯的通道。

这意味着服务器能够向客户端推送消息，不管你什么时候写一个聊天消息，主意就是服务器将会获得这个消息，并将这个消息推送给链接到服务器的其余客户端。

2.web框架

第一步是搭建一个简单的HTML网页，该网页提供了一个表单和一系列消息。咱们将使用node.js的web框架Express，确保Node.js已经被安装了。

首先建立一个package.json文件，来描述咱们的工程，我建议你把它放在一个空的目录中(我叫它chat-example)，

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 {
  "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
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
npm install --save

如今，咱们安装一下Express：

 
 
 
 
  
  
  
  1
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
$ npm install --save express

既然express已经被安装好了，咱们能够建立一个index.js文件来来设置应用。

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
 
 
 
 
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');
});

这将会作三件事件：

Express将app初始化成一个函数处理器，你能够将其提供给一个HTTP服务器(看第二行)
咱们定义一个路由处理器，当咱们访问网站主页时，这个处理器就会被调用。
咱们让这个http服务器监听3000端口。

若是你运行node index.js，你会看到下面的图示：

3.提供HTML

到目前为止，在index.js文件中，咱们调用了res.send()这个方法，并将HTML类型的字符串传递给它。若是把整个应用的HTML放在那儿的话，咱们的代码看起来会很是奇怪。相反，咱们将会建立一个index.html文件，并提供它。

咱们使用sendFile()方法来重构路由处理器：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
 
 
 
 
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

使用如下的代码来填写index.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
 
 
 
 
<!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>

若是你重启这个进程，而后从新刷新页面，看起来是这样的：

4.集成Socket.IO

Socket.IO由两部分构成：

socket.io：一个服务器，集成了Node.JS的HTTP服务器
socket.io-client：一个客户端库，在浏览器端加载

在开发期间，socket.io会自动为咱们提供客户端，因此如今咱们只需安装一个模块：

 
 
 
 
  
  
  
  1
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
npm install --save socket.io

这个命令会安装socket.io模块，并将依赖项添加到package.json文件中，如今咱们在index.js添加一些代码：

 
 
 
 
  
  
  
  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
 
 
 
 
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');
});

注意到，我传递了一个http(HTTP Server)对象来建立一个新的socket.io实例，而后，为即未来到的套接字监听connection事件，我会将其打印到控制台中。

如今，我在index.html文件中，在</body>以前添加了如下的代码段：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
 
 
 
 
<script src="/socket.io/socket.io.js"></script>
<script> var socket = io(); </script>

上面的代码段会加载socket.io-client，它暴露了io这个全局变量，而后进行链接。

注意到，我在调用io()的时候，并无声明任何URL，由于它默认是尝试链接提供网页的主机。

若是你如今从新加载服务器和网页，你会发现控制台会打印“a user connected”。尽力打开几个标签，你会发现控制台会打印出多个消息。

每一个socket也会发射特殊的disconnect事件：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
 
 
 
 
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

若是你屡次刷新一个标签的话，你会立刻看到：

5.发射事件

Socket.IO背后的思想是你能够发射和接收你想要的任何事件，携带你想要的任何数据。任何可以被转换成JSON的对象都能这样作，包括二进制数据。

让咱们实现一个效果，当用户输入一条消息时，服务器会把它看成是一个chat message事件，index.html中script(脚本)部分应当是这样了：

在index.js中，咱们打印出chat message事件：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
 
 
 
 
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

6.广播

接下来咱们打算使用服务器来向其余的客户端发射事件，为了可以向每一个人都发射事件，Socket.IO为咱们提供了io.emit()方法：

 
 
 
 
  
  
  
  1
 
 
 
 
 
 
 
 
  
  
  
  1
 
 
 
 
io.emit('some event', { for: 'everyone' });

若是你想要发送消息给每一个人，除了某个特定的套接字，咱们有broadcast标识：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
 
 
 
 
io.on('connection', function(socket){
  socket.broadcast.emit('hi');
});

这个例子中，为了简洁性，咱们将把消息发送给任何人，包括发送的客户端：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
 
 
 
 
io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

在客户端，当捕获到chat message事件的时候，咱们会将它展现在页面上，整个客户端的JavaScript代码以下面所示：

 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
 
 
 
 
  
  
  
  1
  
  
  
  2
  
  
  
  3
  
  
  
  4
  
  
  
  5
  
  
  
  6
  
  
  
  7
  
  
  
  8
  
  
  
  9
  
  
  
  10
  
  
  
  11
 
 
 
 
<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>

至此，咱们的聊天应用已经完成了，大约20多行代码。

你能够在这里得到源代码。

$ git clone https://github.com/guille/chat-example.git