主要是两个文件,一个是后端文件,一个是前端文件:

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

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

首先,我们来写后端文件-app.js:

var express = require('express');
var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
app.use('/', express.static(__dirname+'/'));
var users = [];
console.log('服务器运行于:localhost:3004');
io.on('connection', function(socket){
console.log('a user connected'); socket.on('login',function(data){ socket.username = data.username;
users.push(data.username);
// 统计连接数
socket.emit('users',{number:users.length}); // 发送给自己
socket.broadcast.emit('users',{number:users.length}); // 发送给其他人 });
socket.on('logout',function(data){ socket.username = data.username;
users=users.slice(0,users.length-1);
console.log()
统计连接数
socket.emit('users',{number:users.length}); // 发送给自己
socket.broadcast.emit('users',{number:users.length}); // 发送给其他人 });
});
//开启端口监听socket
server.listen(3004);

然后,前端html:

   <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Socket.IO Example</title>
</head>
<body>
<h1>Socket.IO及时通讯</h1>
<p id="count"></p> <span class="logoutBtn">退出</sapn> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script> //建立连接
socket = io.connect('http://你的服务器地址:3004'); socket.emit("login", {username:'defaultName'}); //接收服务端推送的信息
socket.on("users", function(obj) {
//var curContent = contentNode.html();
//contentNode.html(curContent+obj.msg);
console.log('当前在线:'+obj.number)
}); $('.logoutBtn').click(function(){
socket.emit("logout", {username:'defaultName'});
}); </script> </body>
</html>

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

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

{
"name": "socketServer",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"express": "~4.16.0"
},
"devDependencies": {
"socket.io": "^2.2.0"
}
}

如图,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. Web Pages

    什么是Web Pages 1.WebPages是三种创建ASP.NET网站或Web应用程序模式中的一种 2.而其两种编程模式是MVC(Model-View-Controller,模型-视图-控制器)和 ...

  2. Reading Notes : 180212 冯诺依曼计算机

    读书<计算机组成原理>,百度百科 现在大部分接触过计算机的人,都会知道冯诺依曼计算机,但是这个概念是怎么来的呢?本节我们就通过聊一下计算机的存储程序控制,来认识”冯诺依曼”. 存储程序控制 ...

  3. Xcode 9.3 pod install update 错误

    [!] Oh no, an error occurred. Search for existing GitHub issues similar to yours: https://github.com ...

  4. DB数据源之SpringBoot+MyBatis踏坑过程(二)手工配置数据源与加载Mapper.xml扫描

    DB数据源之SpringBoot+MyBatis踏坑过程(二)手工配置数据源与加载Mapper.xml扫描 liuyuhang原创,未经允许进制转载  吐槽之后应该有所改了,该方式可以作为一种过渡方式 ...

  5. ajax 与 axios区别

    Ajax: Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. Ajax = 异步 J ...

  6. 替代Xshell的良心国产软件 FinalShell

    今年8月份NetSarang公司旗下软件家族的官方版本被爆被植入后门着实让我们常用的Xshell,Xftp等工具火了一把,很长时间都是在用Xshell,不过最近发现了一款同类产品FinalShell, ...

  7. redhat系统升级openssh到7.5

    注意,注意,注意重要的事情说三遍,关于ssh的升级不能完全按照别人的教程进行升级,因为每台生产机器都是不一样的,有可能别人能升级成功但是另外一个就可能会失败,因为每台机器上面跑的应用是不一样的,涉及到 ...

  8. keepalived+nginx+tomcat+redis实现负载均衡和session共享(原创)

    keepalived+nginx+tomcat+redis实现负载均衡和session共享 直接上链接,码了一天,就不再重写了,希望能帮到大家,有问题欢迎留言交流.

  9. XSS攻击 && CSRF攻击 基础理解

    一个网站,不管多么的帅气,多么的风骚,如果你不安全,那始终都是一个弟弟啊~ 今天又看了下XSS和CSRF攻击的文章,我也想发点什么普及下大家的安全意识,毕竟作为一名拥有伟大梦想的程序员,基本的安全意识 ...

  10. 如何在 EXCEL 2003 插入的方框内打对勾,复选框

    一个方框里带勾的符号是吧第一种:EXCEL里有个插入符号的功能知道吧,打开它在符号那栏(不是特殊符号那栏),下拉字体找到Wingdings字体,在下面的符号中就能找到框中带勾的符号 第二种:在界面点& ...