1.下载node.js
2.安装npm
2.安装npm
3.npm安装experss
4npm安装socket.io
5.npm安装bootstrap框架
6.新建index.js
/** * Created by Administrator on 2017/12/27. */ var express = require('express') var app = express() var count=0; var server = require('http').createServer(app); var io = require('socket.io')(server); //socket监听 io.on('connection', function(socket){ //向客户端发送事件消息 //socket.emit('request', /* */); // emit an event to the socket //发送所有的socket客户端发送消息 //io.emit('broadcast', /* */); // emit an event to all connected sockets // setInterval(function(){ // io.emit('msg','hello world'+(new Date())) // },1000) //监听客户端发来的消息 socket.on('send', function(data){ console.log(socket.username) io.emit('msg',{'username':socket.username,'msg':data}) }); // listen to the event //监听用户登陆 socket.on('login', function(data){ // console.log(data) socket.username=data io.emit('msg',{'username':'系统','msg':socket.username+'登陆了!'}) count++; io.emit('count',count) }); // listen to the event socket.on('disconnect',function(){ // console.log('//用户已经离开...') io.emit('msg',{'username':'系统','msg':socket.username+'已经离开!'}) count--; io.emit('count',count) }); }); //添加静态文件中间件 app.use(express.static(__dirname+'/static')) app.get('/', function (req, res) { res.send('Hello World') }) app.get('*', function (req, res) { res.sendFile(__dirname+'/index/1.html') }) // console.log(__dirname+'/index/1.html') server.listen(3000); 7.新建index.html
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>张高伟</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h1>进入张高伟的聊天世界!<span id="number"></span></h1> <div class="row" id="login"> <div class="col-md-12"> <div class="form-group"> <label for="username">名称</label> <input type="username" class="form-control" id="username" placeholder="昵称"> </div> <input class="btn btn-default" type="submit" id="show_btn" value="提交"> </div> </div> <div class="row" id="content"> <div class="col-md-12" id="user_content" > <ul class="content-reply-box mg10"> </ul> </div> <div class="col-md-12" > <textarea class="form-control" rows="3" id="contents"></textarea> <input class="btn btn-success" type="submit" id="send_btn" value="发送"> </div> </div> </div> <!--<div data-role="content" class="container" role="main">--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-2.1.4.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> var socket=''; $('#show_btn').click(function(){ if($.trim($('#username').val())==""){ alert('名字不能填写空!') return false; } $('#login').hide(); $('#content').show(); var username=$('#username').val(); socket=io('ws://59.110.106.68:3000'); //建立连接 socket.on('connect', function(){ socket.emit('login',username); }); socket.on('msg', function(data){ var nike_name='' var class_name=''; if(data.username==username){ nike_name='我' class_name='odd' }else{ nike_name=data.username class_name='even' } $('.content-reply-box').append(' <li class="'+class_name+' Roll">\ <a class="user" href="#"><img class="img-responsive avatar_" src="image/avatar.png" alt=""><span class="user-name">'+nike_name+'</span></a>\ <div class="reply-content-box">\ <span class="reply-time">'+new Date()+'</span>\ <div class="reply-content pr">\ <span class="arrow"> </span>\ '+data.msg+'\ </div>\ </div>\ </li>') }); socket.on('count', function(data){ $('#number').html('('+data+') 人') }); socket.on('disconnect', function(data){ var send_message=username+'退出了!'; socket.emit('login_out',send_message); io.close(); //关闭当前服务器 }) //点击提交发送消息到服务端 $('#send_btn').click(function(){ if($.trim($('#contents').val())==''){ alert('不能发送空值!') return false; } socket.emit('send',$('#contents').val()) $('#contents').val(''); $("html,body").animate({scrollTop:$(".Roll:last").offset().top},1000); }) $(document).keyup(function(event){ if(event.keyCode ==13){ $("#send_btn").trigger("click"); } }); }) </script> </body> </html> 8.node 执行 index.js文件 9.forever strat index.js 守护进程 10. 访问 url:3000/* 打开即可