Socket IO简介

节点JS：套接字IO模块用于开发实时客户端-服务器通信应用程序。
它在内部使用" WebSocket"编程模型在客户端和服务器之间提供实时双向通信。

我们可以观察到，以下技术提供了WebSocket编程来实现这种应用程序。

• HTML5 WebSocket
• Java EE 7 WebSocket API
• 节点JS：Socket IO模块

传统HTTP和WebSocket方法之间的区别

传统的HTTP方法：我们有旧的和传统的HTTP请求-响应无状态方法来提供客户端和服务器之间的通信。
但是它遵循"推送"模型，这意味着当客户端向服务器发送请求时，服务器会将响应推送到客户端。

WebSocket方法：我们也可以使用WebSocket方法来提供客户端和服务器之间的通信。
但是，与传统的HTTP请求-响应无状态方法不同，WebSocket方法使用"拉"模型在客户端和服务器之间提供通信，这意味着服务器始终将数据拉至客户端。
因此，这是一种更有效，更快捷的提供客户端-服务器通信的方法。

Socket IO(WebSocket)编程的优点：

• 更快的双向通讯
• 跨浏览器支持
• 跨平台支持
• 独立于平台的Web框架

套接字IO设置

与某些节点JS默认模块(例如" npm"，" http"，"事件")随Node JS Platform基本安装(不需要单独的步骤来安装这些模块)一起提供时，Socket.IO并不作为Node JS Default模块提供。
我们需要手动安装。

我们已经使用" node install"命令讨论了"如何安装Node JS模块"。
如果您不熟悉此命令，请阅读我以前的文章：" NPM安装更新和卸载示例"

全局安装Socket.IO在开始Express JS开发之前，首先要做的第一步是使用" npm install"命令安装Express JS模块。

npm install -g socket.io

这里的" socket.io"表示套接字IO模块，"-g"表示全局安装Socket.io模块。

在完成Socket IO Module的安装后，我们需要检查该模块是否已成功安装。
如果安装成功，我们可以在C:\Users \ [Windows_USerName] \ AppData \ Roaming \ npm \ node_modules \ socket.io中找到一个新文件夹，如下所示：

套接字IO示例

• 使用默认设置" socketio"创建一个Node.js：Express JS项目(有关更多详细信息，请参阅我之前的文章"使用Enide Studio 2014 IDE的Express JS WebApplication")。

• 使用" socket.io"模块依赖项更新" package.json"文件。

默认package.json

{
"name": "socketio",
"version": "0.0.0",
"private": true,
"scripts": {
  "start": "node ./bin/www"
},
"dependencies": {
  "body-parser": "~1.12.4",
  "cookie-parser": "~1.3.5",
  "debug": "~2.2.0",
  "express": "~4.12.4",
  "jade": "~1.9.2",
  "morgan": "~1.5.3",
  "serve-favicon": "~2.2.1"
}
}

更新了package.json

{
"name": "socketio",
"version": "0.0.0",
"private": true,
"scripts": {
  "start": "node ./bin/www"
},
"dependencies": {
  "body-parser": "~1.12.4",
  "cookie-parser": "~1.3.5",
  "debug": "~2.2.0",
  "express": "~4.12.4",
  "jade": "~1.9.2",
  "morgan": "~1.5.3",
  "serve-favicon": "~2.2.1",
  "socket.io": "~1.3.5"
}
}

• 观察默认的" node_modules"文件夹

如果我们现在观察我们的项目，它包含所有默认的Express JS模块库，如下所示：

• 使用" socket.io"库更新" node_modules"。

为了使用Socket IO模块库，我们需要在项目根目录下执行以下命令：

npm install --save socket.io

其中" – save"选项意味着从本地存储库中检索" socket.io"库，并将其添加到我们的项目中。
这类似于将JAR文件添加到我们的Java项目中。

在我们的项目根目录中打开命令提示符，然后执行以上命令：

注意：-请忽略这些错误或者警告。

现在，在Enide IDE Studio 2014 IDE中刷新" socketio"项目，并观察到新添加的socketio库到我们的项目中，如下所示：

• 使用以下内容更新app.js：

app.js

//Required Modules
var express = require('express');
var path = require('path');
var http = require('http');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var io = require('socket.io');

//Routings
var index = require('./routes/index');
var user = require('./routes/users');

//Create Express App
var app = express();
app.set('port', process.env.PORT || 3000);

//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/users', user);

var server = http.createServer(app);
io.listen(server);

io.sockets.on('connection', function (socket) {
socket.on('messageChange', function (data) {
  console.log(data);
  socket.emit('receive', data.message.split('').reverse().join('') );
});
});

server.listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

module.exports = app;

代码说明

• 1-9行，将所有必需的依赖项Node JS模块导入我们的应用程序

• 12-13行，将路由导入到我们的应用程序中

• 第16行，创建Express JS Application对象

• 第17行，将Express WebServer端口设置为侦听。
  这是我们可以设置所需端口号的方法。

• 第20-21行，定义我们的应用程序视图模板引擎，即JADE

• 第33行，创建一个HTTP服务器

• 第34行，使用套接字IO(WebSocket)包装HTTP服务器

• 第36-41行，io.sockets.on()打开客户端和服务器之间的WebSocket连接。

• 第47行，导出我们的应用程序。

• 使用以下内容更新index.jade文件：

/views/index.jade

extends layout

block content
h1= title
p Welcome to 
  span.received-message #{example}
input(type='text', class='message', onkeyup='send(this)')
script(src="/socket.io/index.js")
script.
  var socket = io.connect('https://localhost');
  socket.on('receive', function (message) {
    console.log('received %s', message);
    document.querySelector('.received-message').innerText = message;
  });
  function send(input) {
    console.log(input.value)
    var value = input.value;
    console.log('Sending Client Message: %s to Server', value);
    socket.emit('messageChange', {message: value});
  }

• 使用以下内容更新index.js文件：

/routes/index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { example: 'Node Express JS: Socket.IO Module',
                      title:  'Socket.IO Module' });
});

module.exports = router;

• 最终的项目结构如下所示：

执行套接字IO示例

• 在项目根目录中打开命令提示符，然后执行以下命令：

npm start

• 运行Socket IO Example并观察输出

使用以下URL访问应用程序：https：//localhost：3000 /

要在内部查看WebSocket的电源，请使用鼠标右键单击并选择"检查元素"，如下所示：

选择"控制台"选项卡。
在"文本框"中输入一些文本，并观察控制台输出。