主要是两个文件，一个是后端文件，一个是前端文件：

后端文件：有人登录了，就通知所有的正在访问的页面，把总人数+1；反之-1；

前端文件：有人登录了，通知后端，页面关闭了，通知后端，同时接收后端派发来的消息；

首先，我们来写后端文件-app.js：

  1. var express = require('express');
  2. var app = require('express')();
  3. var server = require('http').createServer(app);
  4. var io = require('socket.io').listen(server);
  5. app.use('/', express.static(__dirname+'/'));
  6. var users = [];
  7. console.log('服务器运行于：localhost:3004');
  8. io.on('connection', function(socket){
  9.      console.log('a user connected');
  11. 	socket.on('login',function(data){
  13. 		  socket.username = data.username;
  14. 		  users.push(data.username);
  15. 		  // 统计连接数
  16. 		  socket.emit('users',{number:users.length});  // 发送给自己
  17. 		  socket.broadcast.emit('users',{number:users.length}); // 发送给其他人
  19. 	});
  20. 	socket.on('logout',function(data){
  22. 		  socket.username = data.username;
  23. 		  users=users.slice(0,users.length-1);
  24. 		  console.log()
  25. 		   统计连接数
  26. 		  socket.emit('users',{number:users.length});  // 发送给自己
  27. 		  socket.broadcast.emit('users',{number:users.length}); // 发送给其他人
  29. 	});
  30. });
  31. //开启端口监听socket
  32. server.listen(3004);

然后，前端html：

  1.    <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>Socket.IO Example</title>
  6.   </head>
  7.   <body>
  8.     <h1>Socket.IO及时通讯</h1>
  9.     <p id="count"></p>
  11. 	<span class="logoutBtn">退出</sapn>
  13.        <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  14.       <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
  15.     <script>
  17.     //建立连接
  18.     socket = io.connect('http://你的服务器地址:3004');
  20. 	socket.emit("login", {username:'defaultName'}); 
  22. 	//接收服务端推送的信息
  23.     socket.on("users", function(obj) {
  24.         //var curContent = contentNode.html();
  25.         //contentNode.html(curContent+obj.msg);
  26. 		console.log('当前在线：'+obj.number)
  27.     });
  29. 	$('.logoutBtn').click(function(){
  30. 	    socket.emit("logout", {username:'defaultName'});
  31. 	});
  33.     </script>
  35.   </body>
  36. </html>

后端文件写好后，要发布到我们自己的服务器上运行才会生效，

后端文件要用到express和socket.io,所以我再创建一个package.json文件：

  1. {
  2.   "name": "socketServer",
  3.   "version": "0.0.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "start": "node ./bin/www"
  7.   },
  8.   "dependencies": {
  9.     "express": "~4.16.0"
  10.   },
  11.   "devDependencies": {
  12.     "socket.io": "^2.2.0"
  13.   }
  14. }

如图，app.js和package.json在一个叫socketServer文件夹中，通过ftp传到服务器：

在服务器命令行进入socketServer目录下，运行npm install命令，安装好依赖，安装好后就多了一个node_modules文件：

最后，我们运行我们的app.js：

一般我们都是通过npm start启动应用，其实就是调用node ./var/www/socketServer。

换成pm2就是：pm2 start ./var/www/socketServer

如果一切顺利的话，我们的在线人数统计就完成了。

如果你有使用pm2的话，使用：pm2 logs命令就可以在控制台上查看打印信息了

创建一个socket服务实时统计在线人数的更多相关文章

  1. 使用PHP创建一个socket服务端

    与常规web开发不同,使用socket开发可以摆脱http的限制.可自定义协议,使用长连接.PHP代码常驻内存等.学习资料来源于workerman官方视频与文档. 通常创建一个socket服务包括这几 ...

  2. [Swift通天遁地]四、网络和线程-(14)创建一个Socket服务端

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. [Swift通天遁地]四、网络和线程-(13)创建一个Socket客户端

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  4. C# 创建一个WCF服务

    做代码统计,方便以后使用: app.config配置文件设置: <configuration> <system.serviceModel> <bindings> & ...

  5. 为MongoDB创建一个Windows服务

    一:选型,根据机器的操作系统类型来选择合适的版本,使用下面的命令行查询机器的操作系统版本 wmic os get osarchitecture 二:下载并安装 附上下载链接 点击安装包,我这里是把文件 ...

  6. 【LINUX】——linux如何使用Python创建一个web服务

    问:linux如何使用Python创建一个web服务? 答:一句话,Python! 一句代码: /usr/local/bin/python -m SimpleHTTPServer 8686 > ...

  7. 第一个socket服务端程序

    第一个socket服务端程序 #include <stdio.h> #include <stdlib.h> #include <string.h> #include ...

  8. ng 通过factory方法来创建一个心跳服务

    <!DOCTYPE html> <html ng-app="myApp"> <head lang="en"> <met ...

  9. 使用PHP来简单的创建一个RPC服务

    RPC全称为Remote Procedure Call,翻译过来为"远程过程调用".主要应用于不同的系统之间的远程通信和相互调用. 比如有两个系统,一个是PHP写的,一个是JAVA ...

随机推荐

  1. 微信小程序的postMessage不实时？

    最近在开发小程序的时候用到了wx.postMessage()这个API,在使用前我一直认为wx.postMessage()可以在小程序和H5中实时的传递信息,可以依靠这个API开发一个小程序的brid ...

  2. python 爬虫简介以及使用方法

    阶段大纲: 一. 爬虫 1. 基本操作 - 登录任意网站(伪造浏览器的任何行为) 2. 性能相关 - 并发方案: - 异步IO: gevent/Twisted/asyncio/aiohttp - 自定 ...

  3. NodeJs仿阿帕奇实现浏览某一路径文件目录效果

    网页效果 这里实现的效果是将我的电脑下的某一路径文件展现在网页中 html网页代码: <h1>仿阿帕奇网页 </h1> <table> <tr> < ...

  4. Linux CentOs下安装lamp

    以home目录为例,进入/home cd /home 是否安装gcc与gcc-c++,没有则安装 yum -y install gcc gcc-c++ 一.安装Apache 下载httpd wget ...

  5. React组件的使用

     一.index.js 文件[基本配置] //react语法塘 import React from 'react'; //reactDom用来操作虚拟DOM import ReactDom from ...

  6. JSON API免费接口 各种提供JSON格式数据返回服务网站的API接口

    这里为大家搜集了一些能够返回JSON格式的服务接口.部分需要用JSONP调用. 电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuIds=J_商品ID& ...

  7. Css Sprite(雪碧图、精灵图)<图像拼合技术>

    一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不 ...

  8. springboot+layui实现增删查改

    本文描述springboot和layui的结合,采用了springboot内置的jdbc,根据不同需要可以进行修改:分页采用了layui中自带分页格式! ----------------------- ...

  9. 通过burpsuite替换cookie登录后台

    通过burpsuite可以比较方便的替换http头部的cookie.useragent等字段,在获取到用户的cookie后实现登录.具体使用方法如下: 如替换cookie,可以写正则表达式^Cooki ...

  10. PTA基础编程题目集7-1厘米换算英尺英寸

    如果已知英制长度的英尺foot和英寸inch的值,那么对应的米是(foot+inch/12)×0.3048.现在,如果用户输入的是厘米数,那么对应英制长度的英尺和英寸是多少呢?别忘了1英尺等于12英寸 ...