nodeJs socketJs 搭建长连接(1) 基础讲解

最新推荐文章于 2023-09-21 22:40:45 发布

lzrit

最新推荐文章于 2023-09-21 22:40:45 发布

阅读量1.3k

点赞数

分类专栏： nodejs 文章标签： nodejs

nodejs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

服务器搭建

首先下载node.js,前往官网下载并安装,在此中需要下载安装express和socket,前者为node开发web的环境,后者为我们开发聊天服务器的js
搭建项目
1.新建文件夹,qqDemo
2.在项目下安装express和socket
npm install --save express
npm install --save socket.io
3.新建一个index.js作为启动js
4.新建index.html作为前端展示
5.启动进入qqDemo文件夹中,使用命令 node index.js启动站点服务
文件阐述
index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
res.send('<h1>Welcome Realtime Server</h1>');
});

http.listen(3000, function(){
console.log('listening on *:3000');
});

var onlineUsers = new Array();
var users = {};
io.sockets.on('connection', function (socket) {
io.sockets.emit('connect',{'status':'正确'});
console.log("new conns join ..");
socket.on('private message', function (from,to,msg) {
console.log('I received a private message by ', from, ' say to ',to, msg);
if(to in users){
users[to].emit('to'+to,{mess:msg});
}
});
socket.on('new user',function(data){
   //console.log("socket标示为:"+socket.id);
if(data in users){

}else{
var nickname = data;
users[nickname]= socket;
       onlineUsers.push(data);
       console.log('用户'+data+'加入聊天室');
console.log('当前的在线用户有 '+onlineUsers);
}
   io.sockets.emit('online users',onlineUsers);
});
socket.on('disconnect', function () {
   var logoutUserName ;
   for(var obj in users){
       console.log("obj的值是:"+obj);
           if(users[obj] == socket){
               console.log(obj+"用户退出聊天室");
               logoutUserName = obj;
               delete users[obj];
           }
       }
       for(var i = 0; i<onlineUsers.length; i++){
           if(onlineUsers[i] == logoutUserName){
               onlineUsers.splice(i,i);
           }
       }
       console.log("当前在线人员:"+onlineUsers);
       //更新在线用户
       io.sockets.emit('online users',onlineUsers);
io.sockets.emit('user disconnected');
});
});
index.html
<!DOCTYPE html>
<html>
<head>

       <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
       <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">
<title>多人聊天室</title>

       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://127.0.0.1:3000/socket.io/socket.io.js"></script>
</head>
<body>
<script>
$(function(){
       var onlineUsers;
       var socket;
           var userName;
       $("#login").on("click",function(){
           socket = io.connect('ws://localhost:3000');
               socket.on('connect', function (data) {
               userName = $('#user_name').val();
               socket.emit('new user',userName);
               $('#div').show();
               //接受聊天信息
               socket.on('to'+userName, function (data) {
               alert("来消息了"+data.mess);
                   console.log("来消息了"+data.mess);
$message_list.append('<li>'+data.from+'说'+data.message+'</li><li>');
});
               //获得当前在线人员
               socket.on("online users",function(data){
               onlineUsers = data;
               console.log("刷新在线人数");
               $("#select").empty();
               for(var j=0; j< onlineUsers.length; j++){
               var option = $("<option value='"+onlineUsers[j]+"'>"+onlineUsers[j]+"</option>");
                   $("#select").append(option);
               }

               });
});
           });

$("#send").click(function(e){
var msg = $('#message').val(),
to = $('#select').val(),
$message_list = $('#message_list');
socket.emit('private message',userName,to,msg);

});
});
</script>
   <div>
   姓名:<input id="user_name" type="text"><br>
   <input type="button" value="登陆" id="login">
   </div>

   <div id="div" style="display:none">
   在线用户:<select id="select"></select><br>
消息内容:<input type="text" id="message"><button type="button" id="send">发送</button>
   </div>

<ul id="message_list">

</ul>
</body>
</html>

lzrit

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
nodeJs socketJs 搭建长连接(1) 基础讲解

服务器搭建首先下载node.js,前往官网下载并安装,在此中需要下载安装express和socket,前者为node开发web的环境,后者为我们开发聊天服务器的js搭建项目1.新建文件夹,qqDemo2.在项目下安装express和socketnpm install --save expressnpm install --save socket.io3.新建一个index.js作为...
复制链接

扫一扫