16042九、nodejs--Socket.IO即时通信

时间  2019-12-05
标签 nodejs socket.io socket 即时 通信 栏目 系统网络 繁體版
原文   原文链接

动态web

在html5之前，web的设计上并无考虑过动态，他一直是围绕着文档设计的，咱们看之前比较老的网站，基本上都是某一刻用来显示单一的文档的，用户请求一次web页面，获取一个页面，可是随着时间的推移，人们想要web作更多的事情了，而不是简单的要显示文档，而JavaScript一直处于开发人员推进web页面功能的发展中心。 
Ajax无疑是动态Web页面的一个重大发展，他再也不须要咱们即便更新一点内容，也须要刷新整个页面了，可是有些方面，又体现了他的不足。若是从服务器请求数据，他当然号，可是若是服务器想要将数据推送到浏览器呢。Ajax技术没法很容易的支持将数据推送到客户，虽然能够，可是须要跨国不少的障碍才行，并且不一样的浏览器工做方式也不一样，例如IE和FireBox他们的内核就不同，从而工做方式也不同。 
WebSocket是在对服务器和客户端之间实现双向通讯问题的相应。他的思想是，从头开始，设计一个开发人员可使用的标准以便以一直的方式建立应用程序，而不是经过复杂的，并不总能设置全部浏览器的工做。他的思想是Web服务器和浏览器之间保持持久打开，这就使得不论是服务器仍是浏览器均可以在想要的时候推送数据。由于链接是持久的，因此数据的交换很是的快，也就成了实时的了。javascript

Socket.IO

说了那么多，咱们介绍一下正主，Socket.IO是Node.js的一个模块，他提供经过WebSocket进行通讯的一种简单方式，WebSocket协议很复杂，可是Socket.IO提供了服务器和客户端双方的组件，因此只须要一个模块就能够给应用程序加入对WebSocket的支持。并且还能支持不一样的浏览器。html

基础的Socket.IO

Socket.IO既能在服务端也能在客户端工做，要使用它，必须将其添加到服务器端的JavaScript(Node.js)和客户端的JavaScript(jQuery)中，这是觉得内通讯一般是双向的，因此Sokcet.IO须要能在两边工做。html5

var server = http.createServer(function (req,res){ fs.readFile('./index.html',function(error,data){ res.writeHead(200,{'Content-Type':'text/html'}); res.end(data,'utf-8'); }); }).listen(3000,"127.0.0.1"); console.log('Server running at http://127.0.0.1:3000/');
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

并且必须将Socket.IO库包含起来，才能加入Socket.IO的功能。java

var io = require('socket.io').listen(server);
  • 1
  • 1

而后加入一个事件来响应客户端究竟是链接了，仍是断开了。事件以下：node

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

是否是以为很是的简单，下面咱们看一下完整的代码实现是如何实现的吧：jquery

简单Socket.IO应用

新建app.js

新建文件夹socket.io，在该文件夹下新建app.js，写以下代码：web

var http = require('http'); var fs = require('fs'); var server = http.createServer(function (req,res){ fs.readFile('./index.html',function(error,data){ res.writeHead(200,{'Content-Type':'text/html'}); res.end(data,'utf-8'); }); }).listen(3000,"127.0.0.1"); console.log('Server running at http://127.0.0.1:3000/'); var io = require('socket.io').listen(server); io.sockets.on('connection',function(socket){ console.log('User connected'); socket.on('disconnect',function(){ console.log('User disconnected'); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

新建index.html

新建index.html文件，代码以下：npm

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Socket.IO Example</title> </head> <body> <h1>Socket.IO Example</h1> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://127.0.0.1:3000'); </script> </body> </html>
  • 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

新建package.json

新建package.json来引入模块。json

{
    "name":"socketio_example", "version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

版本号你们能够输入本身的nodejs -V，或者socket.io -v来查看本身的版本号。浏览器

运行

若是你们没有安装Socket.IO，能够运行以下代码，若是安装了，自动跳过这一步。 
npm install socket.io 
从终端运行以下命令安装模块 
npm install 
运行以下命令启动服务器 
node app.js 
打开浏览器，输入http://127.0.0.1:3000/，多打开几个页签，都输入该网址，再任意关闭一个页签，而后看看咱们的cmd命令窗口是否是以下： 
这里写图片描述 
这里会详细的记录又多少个用于链接了，也有多少个用户断开链接了，这样就能统计咱们网页的访问量了。

从服务器发送数据到客户端

上边的实例咱们已经实现了链接或者断开服务器作记录了，可是咱们要是想要推送消息怎么办，例如咱们好友的QQ上线了，腾讯都会咳嗽一下来提醒咱们有好友上线。下面咱们来作一下这个功能功能。

发送给单个用户

io.sockets.on('connection',function(socket){ socket.emit('message',{text:'你上线了'}); });
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

发给全部用户

io.sockets.on('connection',function(socket){ socket.broadcast.emit('message',{'你的好某XXX上线了'}); });
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

不管是发送给单个用户仍是全部用户，这个message是本身写的，可是要在客户端用，因此命名要注意。

客户端

在客户端咱们能够添加侦听事件来接收数据。

var socket = io.connect('http://127.0.0.1:3000'); socket.on('message',function(data){ alert(data.text); })
  • 1
  • 2
  • 3
  • 4
  • 1
  • 2
  • 3
  • 4

经过这些功能，咱们就在第一个例子的基础上，实现用户数量的统计。这里只须要在服务端设置一个变量，count,若是有一个上线，那么就数量+1，并通知全部用户，最新的在线人数。

新建app.js

var http = require('http'); var fs = require('fs'); var count = 0; var server = http.createServer(function (req,res){ fs.readFile('./index.html',function(error,data){ res.writeHead(200,{'Content-Type':'text/html'}); res.end(data,'utf-8'); }); }).listen(3000,"127.0.0.1"); console.log('Server running at http://127.0.0.1:3000/'); var io = require('socket.io').listen(server); io.sockets.on('connection',function(socket){ count++; console.log('User connected' + count + 'user(s) present'); socket.emit('users',{number:count}); socket.broadcast.emit('users',{number:count}); socket.on('disconnect',function(){ count--; console.log('User disconnected'); socket.broadcast.emit('users',{number:count}); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

建立index.html文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Socket.IO Example</title> </head> <body> <h1>Socket.IO Example</h1> <h2>How many users are here?</h2> <p id="count"></p> <script src="http://***.***.**.***:9001/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://127.0.0.1:3000'); var count = document.getElementById('count'); socket.on('users',function(data){ console.log('Got update from the server'); console.log('There are ' + data.number + 'users'); count.innerHTML = data.number }); </script> </body> </html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

建立package.json文件

{
    "name":"socketio_example", "version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

安装模块npm install 
启动服务器node app.js 
打开浏览器，输入http://127.0.0.1:3000,能够看到以下图片： 
一个用户链接 
再打开一个链接http://127.0.0.1:3000，能够看到以下结果： 
第二个链接 
能够看到若是咱们打开两个链接，那么两个页签都会显示当前又两个用户在线，若是关闭其中一个，咱们能够看到又显示只有一个用户在线。

将数据广播给客户端

接下来咱们来看看Socket.IO是如何实现客户端与客户端的通讯呢。 
要想实现该功能，首先须要客户端将消息发送到服务端，·而后服务端发送给除本身以外的其余客户。服务器将消息发送给客户端的方法在上一个例子中咱们已经实现了，那么咱们须要的是客户端把接收到的消息发送给服务器。 
下边的代码思想是利用表单来实现的。

<form id="message-form" action="#"> <textarea id="message" rows="4" cols="30"></textarea> <input type="submit" value="Send message" /> </form> <script src="http://***.***.***.**:9001/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://127.0.0.1:3000'); var message = document.getElementById('message'); $(message.form).submit(function() { socket.emit('message', { text: message.value }); return false; }); socket.on('push message', function (data) { $('form').after('<p>' + data.text + '</p>'); }); </script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

实现的思想是,将JQuery和SocketIO库包含进来，只是浏览器拦截127.0.0.1:3000的服务，使用Jquery的submit方法加入侦听期，等候用户提交表单。 
发送消息给Socket>IO服务器，文本区域的内容位消息发送。 
添加return false ，防止表单在浏览器窗口提交。 
在上边已经说过服务器如何广播消息，下边咱们说一下客户端如何显示客户端发送的消息。

socket.on('push message', function (data) { $('form').after('<p>' + data.text + '</p>'); })
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

实例实现

建立messaging的新文件夹 
在文件夹下建立package.json文件，代码以下：

{
    "name":"socketio_example", "version":"4.13.2", "private":true, "dependencies":{ "socket.io":"1.4.5" } }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

建立app.js文件，代码以下：

var http = require('http'); var fs = require('fs'); var server = http.createServer(function (req,res){ fs.readFile('./index.html',function(error,data){ res.writeHead(200,{'Content-Type':'text/html'}); res.end(data,'utf-8'); }); }).listen(3000,"127.0.0.1"); console.log('Server running at http://127.0.0.1:3000/'); var io = require('socket.io').listen(server); io.sockets.on('connection',function(socket){ socket.on('message',function(data){ socket.broadcast.emit('push message',data); }); });
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

建立index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Socket.IO Example</title> </head> <body> <h1>Socket.IO Example</h1> <form id="message-form" action="#"> <textarea id="message" rows="4" cols="30"></textarea> <input type="submit" value="Send message" /> </form> <script src="http://222.222.124.77:9001/jquery.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket = io.connect('http://127.0.0.1:3000'); var message = document.getElementById('message'); $(message.form).submit(function() { socket.emit('message', { text: message.value }); return false; }); socket.on('push message', function (data) { $('form').after('<p>' + data.text + '</p>'); }); </script> </body> </html>

 

加载模块npm install 
启动服务器node app.js 
而后打开浏览器的多个页签，都输入http://127.0.0.1:3000 
能够看到咱们再任何一个窗口输入内容，都会在其余的页面显示咱们输入的内容，效果以下： 
这里写图片描述 
这里写图片描述

小结

这篇博客好长，其实说了这么多，仍是有不少的东西没有说，可是咱们仍是讨论了Socket.IO如何实现动态的，经过服务端能显示用户的链接，和统计连接次数统计，到最后的消息的通知和聊天功能的实现。在咱们的生活中这种例子比比解释，例如QQ，例如淘宝的抢购，都是能够经过这种方式实现的，这样咱们就能实时的实现动态的功能了。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程