清蒸小龙虾

socket.io 实现简易聊天

客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        textarea{
            resize: none;
        }
        .main1{
            float: left;
        }
        #main{
            float: left;
            width: 400px;
            height: 400px;
            overflow-y: auto;
            border: solid 1px blue;
        }
        .dialog{
            width: 300px;
            height: 50px;
            margin: 20px 30px;
        }
        .course-btn {
            width: 150px;
            background-color: #00b33b;
            font: 14px/40px "Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
            height: 40px;
            padding: 0 12px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            margin-top: 20px;
            border-radius: 2px;
        }
        .textRun{
            display: none;
            margin-left: 30px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div class="main1">
        <div class="dialog">
            <input type="text" id="username" placeholder="请输入用户名">
            <button onclick=dialog()>登录</button>
        </div>
        <div class="textRun">
            <textarea name="" id="tv" cols="30" rows="10"></textarea>
            <div onclick="textrun()" class="course-btn">发表评论</div>
        </div>
    </div>
    
    <div id="main">
        
    </div>
    <script src="js/socket.io.slim.js"></script>
    <script>
        var username;
        function dialog () {
            username = document.getElementById('username').value;
            var DA = document.getElementsByClassName('dialog')[0];
            if(username!='') {
                socket.emit('dialog',username)
                DA.style.display = 'none';
                document.getElementsByClassName('textRun')[0].style.display = 'block';
            }
        }
        function textrun () {
            var text = document.getElementById('tv').value;
            socket.emit('text',{name:username,text:text})
            document.getElementById('tv').value = '';
        }
        var socket = io('http://localhost:3001')
    
        socket.on("text",function(data){
            console.log(data)
            var div = document.createElement('div');
            var t = div.innerHTML = '<p>'+data.name+':'+data.text+'</p>';
            var main = document.getElementById('main');
            main.appendChild(div)
            main.scrollTop = main.scrollHeight;
        })
    
    </script>
</body>
</html>

服务端：

var app = require('http').createServer();
var io = require('socket.io')(app);
var count = 0
var mapUsername = [];

function addEventLinsten(socket, event) {
    socket.on(event, function(data){
        for (var i in mapUsername) {
            if(i){
                mapUsername[i].emit(event, data)
            }
        }
    })
    
}
// 连接
io.on('connection', function(socket){
    count += 1
    socket.num = count;
    mapUsername[count] = socket
    addEventLinsten(socket, 'dialog')
    addEventLinsten(socket, 'text')

    // 断开
    socket.on('disconnect', function(){
        delete(mapUsername[socket.num])
    })
})
app.listen(3001);
console.log('socket 运行成功')

 

posted on 2018-03-02 15:42  清蒸小龙虾  阅读(228)  评论(0)  编辑  收藏  举报

导航