使用experss+socket.io 实现聊天

最新推荐文章于 2023-06-04 14:49:26 发布

张高伟

最新推荐文章于 2023-06-04 14:49:26 发布

阅读量204

点赞数

分类专栏： nodejs

本文链接：https://blog.csdn.net/qq_36663951/article/details/78923335

版权

nodejs 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.下载node.js
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">&nbsp;</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/* 打开即可

张高伟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用experss+socket.io 实现聊天

1.下载node.js2.安装npm3.npm安装experss4npm安装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 s...
复制链接

扫一扫

专栏目录