使用socket.io配合node.js制作的一个简单IM程序-智言个人博客

体验地址：http://123.206.107.231/

这个地址会在6月6日失效，如果不在这个时间前请勿测试。

前端代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <title>智言工作室聊天系统www.webzhi.com</title>
        <style media="screen">
            body{margin: 0; padding: 0;}
            button{-webkit-appearance : none ;  }/*解决iphone safari上的圆角问题*/
            #kim{width: 300px; height: 280px; border-left: 1px solid #eaf0f2; background-color: #eaf1f3; position: fixed; right: 0; bottom: 0;}
            #kim h2{font-weight: 400; font-size: 13px; margin: 0; background-color: #fff; border-top: 1px solid #eaf0f2; border-bottom: 1px solid #eaf0f2; padding: 5px 0; text-align: center; color: #777;}
            #kim_text{height: 221px; overflow-y: auto;}
            #kim_text p{padding: 0 15px; }
            #kim_text p span{font-size: 12px; display: inline-block;  background-color: #ddd; padding: 3px 5px; position: relative; z-index: 9; word-break:break-all;}
            #kim_text p span:before{content: ''; display: inline-block; position: absolute; width: 0; height: 0; border-right: 10px solid #ddd; border-bottom: 10px solid transparent; top: -0px; left: -10px; z-index: 1; }
            #kim_btn{height: 30px;}
            #kim_btn input{outline:none;  border:0; width: 70.6%; height: 30px;float: left; padding: 0 10px; background-color: #fcc}
            #kim_btn button{border: 0; background-color: #f66; color: #fff; cursor: pointer; height: 30px; transition: 0.3s; opacity: 0.8; font-size: 12px;}
            #kim_btn button:hover{opacity: 1;}
        </style>
    </head>
    <body>
        <div id="kim">
            <h2>智言WEB-IM系统</h2>
            <div id="kim_text">
                <p><span>欢迎光临智言WEB-IM系统，有任何问题都可以留言给我们哦！</span></p>
            </div>
            <div id="kim_btn">
                <input type="text" name="textVal" id="textVal" value="">
                <button type="button" id="btns" name="button">提交(回车)</button>
            </div>
        </div>
        <audio id="smsaudio">
            <source = src="mp3/sms.mp3" type="audio/mp3">
        </audio>
        <script src="socket.io.js"></script>
        <script>
        var socket = io.connect('http://123.206.107.231');
            document.addEventListener('keydown', function (e) {
                if (event.keyCode==13) {
                    let str = document.getElementById('textVal').value;
                    socket.emit('message', str);
                    document.getElementById('textVal').value = '';
                }
            });
            document.getElementById('btns').addEventListener('click', function (e) {
                let str = document.getElementById('textVal').value;
                socket.emit('message', str);
                document.getElementById('textVal').value = '';

            });
        socket.on('message', function (data) {
            document.getElementById('kim_text').appendChild(document.createElement('p')).innerHTML = '<span>' + data + '</span>';
            document.getElementById('kim_text').scrollTop = document.getElementById('kim_text').scrollHeight;
            document.getElementById('smsaudio').play();
        });
        </script>

    </body>
</html>

有任何的问题都可以留言给我。此聊天程序未做过多处理，请勿用于正式环境。