zoukankan      html  css  js  c++  java
  • express_socket 聊天室

    app.js

    
    var express=require('express');
    
    var app=express();
    
    var DB=require('./module/db.js');
    
    
    app.set('view engine','ejs');
    app.use(express.static('public'));
    
    
    //express里面使用socket.io
    var server = require('http').Server(app);
    var io = require('socket.io')(server);
    server.listen(8000);
    
    
    app.get('/',function(req,res){
    
        //res.send('首页');
    
        res.render('index');
    
    })
    
    app.get('/chat',function(req,res){
    
        //res.send('首页');
    
        var name=req.query.name;
        res.render('chat',{
            name:name
        });
    
    })
    
    //写socket.io 服务端
    io.on('connection',function(socket){
        console.log('有个客户端连接了');
        socket.on('message',function(data){
            io.emit('message',data);  /*全部广播*/
        })
    })

    index.ejs

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
    
        <style>
            html {
                height: 100%;
                background: url("banner-bg_2x.jpg") no-repeat center center / 100% auto #1B1C3B;
            }
            .box{
                 400px;
                height: 60px;
                display: flex;
    
                margin:200px auto;
            }
            .box input[type='text']{
                flex: 1;
                height: 60px;
                border: 1px solid #eee;
            }
            .box button{
                 100px;
                height: 64px;
                background: orange;
                color: #fff;
                border:none;
                cursor: pointer;
            }
        </style>
        <script src="jquery-1.11.3.min.js"></script>
    
        <script>
    
            $(function(){
    
                $('.login').click(function(){
    
                        var name=$('#name').val();
                        if(name){
                            location.href='/chat?name='+name;
                        }else{
                            alert('您的大名不对');
                        }
                })
            })
        </script>
    </head>
    <body>
    
    <div class="box">
        <input type="text" placeholder="请输入您的大名" id="name"/> <button class="login">进入聊天室</button>
    </div>
    </body>
    </html>

    chat.js

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title></title>
        <style>
    
            .inner{
                max- 640px;
                margin: 0 auto;
    
    
            }
    
            h2 {
                text-align: center;
                background: #eee;
    
                color: red;
                height: 50px;
                line-height: 50px;
            }
    
            .chat{
                padding:20px;
                border: 1px solid #f60;
                height: 500px;
            }
    
            .send{
    
                 100%;
    
                bottom:5px;
                height: 44px;
                line-height: 44px;
                display: flex;
                overflow-x: hidden;
            }
    
            .send input[type='text']{
                flex: 1;
            }
    
            .send input[type='button']{
                 100px;
    
    
            }
    
    
        </style>
    
        <script src="/socket.io/socket.io.js"></script>
        <script src="jquery-1.11.3.min.js"></script>
        <script>
    
    
            $(function(){
    
    
                var socket=io.connect('http://localhost:8000');
    
    
                socket.on('message',function(data){   /*监听服务器广播的数据*/
    
                    $(".list").append(`<li><strong>${data.name}:</strong> ${data.msg}</li>`);
    
                    $('#msg').val('');
    
    
    
                   $('.footer').get(0).scrollIntoView(true);
                })
    
                //发送数据
                $('#send').click(function(){
    
                    socket.emit('message',{
                        msg:$('#msg').val(),
                        name:'<%=name%>'
                    })
    
                })
    
    
            })
        </script>
    </head>
    <body>
    
    <div class="inner">
        <h2>小小聊天室</h2>
    
        <div class="chat" style="overflow-x: auto">
            <ul class="list">
    
            </ul>
           <p class="footer"> </p>
    
        </div>
    
        <div class="send">
    
            <input type="text" id="msg"/>
            <input type="button" id="send" value="发送"/>
    
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    mongodb
    python中读取文件的read、readline、readlines方法区别
    uva 129 Krypton Factor
    hdu 4734
    hdu 5182 PM2.5
    hdu 5179 beautiful number
    hdu 5178 pairs
    hdu 5176 The Experience of Love
    hdu 5175 Misaki's Kiss again
    hdu 5174 Ferries Wheel
  • 原文地址:https://www.cnblogs.com/loaderman/p/11582720.html
Copyright © 2011-2022 走看看