Node.js(socket.io)+ html + js搭建簡單聊天工具
阿新 • • 發佈:2018-12-14
Node.js+ html + js搭建簡單聊天工具
乾貨,直接擼程式碼
環境準備
依賴模組
npm install socket.io
服務端
app.js
var fs = require('fs') //檔案操作 , http = require('http') //http伺服器 , socketio = require('socket.io'); //socket.io,用來和前臺進行互動 var server = http.createServer(function(req, res) { res.writeHead(200, { 'Content-type': 'text/html'}); //將index.html輸出 res.end(fs.readFileSync(__dirname + '/index.html')); }).listen(4343, function() { console.log('Listening at: http://localhost:4343'); }); //連線成功的回撥 socketio.listen(server).on('connection', function (socket) { socket.on('message', function (msg) { console.log('接受到 ', msg); //將資訊傳送給其他客戶端,廣播出去 socket.broadcast.emit('message', msg); }); });
客戶端
index.html
<html> <head> <meta charset="utf-8"> <link href="https://michaelma666.github.io/Resume/Michael_Resume_zh/images/logo.png" rel="icon"> <style type="text/css"> .chatBody { background-color: #E8EEF3; padding: 10px; height: 350px; overflow-y: auto; } ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #F5F5F5; } /*定義滾動條軌道 內陰影+圓角*/ ::-webkit-scrollbar-track { border-radius: 10px; background-color: #F5F5F5; } /*定義滑塊 內陰影+圓角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #123655; } .msg { background-color: #DE6860; border-radius: 10px; padding: 5px 10px; color: #FFF; word-break: break-all; } .msgContainer { margin: 20px; } .left { text-align:left; } .right { text-align:right; } .chatBox { width:500px; height: 400px; margin: 0 auto; } .chatHeader { background-color: #5B6FD2; padding: 10px 30px; border-radius: 10px 10px 0 0; color: #EEE; } .chatFooter { background-color: #5B6FD2; padding: 10px 30px; border-radius: 0 0 10px 10px; } input { height: 30px; line-height: 30px; padding: 5px 10px; border-radius: 5px; } #sendMsg { background-color: #4D93FD; cursor: pointer; color: #FFF; padding: 5px; display: inline-block; padding: 6px 26px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; border:0; } #sendMsg:hover,#sendMsg:active,#sendMsg:focus{ background-color: #7B8EE8; } #chatMessage { width: 327px; } #clear { cursor: pointer; float: right; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="/socket.io/socket.io.js"></script> <script> $(function(){ var iosocket = io.connect(); iosocket.on('connect', function () { alert('連線成功'); iosocket.on('message', function(message) { showotherMsg(message); }); iosocket.on('disconnect', function() { alert('連線已斷開!'); }); }); $('#chatMessage').keypress(function(event) { if(event.which == 13) { event.preventDefault(); if($('#chatMessage').val() == ''){ return false; } else { showSelfMsg($('#chatMessage').val()); iosocket.send($('#chatMessage').val()); $('#chatMessage').val(''); } } }); $('#sendMsg').click(function(event) { if($('#chatMessage').val() == ''){ return false; } else { showSelfMsg($('#chatMessage').val()); iosocket.send($('#chatMessage').val()); $('#chatMessage').val(''); } }); $('#clear').click(function(event){ $('.chatBody').empty(''); }); }); </script> </head> <body> <div class="chatBox"> <div class="chatHeader"> <span id="name">陸小鳳</span> <span id='ip'></span> <span id='clear'>清屏</span> </div> <div class="chatBody"> <div class="msgContainer left"> <span class="msg">久仰久仰</span> </div> <div class="msgContainer right"> <span class="msg">幸會幸會</span> </div> </div> <div class="chatFooter"> <input type="text" id="chatMessage"> <input type="button" name="" value="飛鴿傳書" id="sendMsg"> </div> </div> </body> <script type="text/javascript"> function showSelfMsg(context) { $('.chatBody').append('<div class="msgContainer right">' +'<span class="msg">'+ context +'</span>' +'</div>'); autoScroll(); } function showotherMsg(context) { $('.chatBody').append('<div class="msgContainer left">' +'<span class="msg">'+ context +'</span>' +'</div>'); autoScroll(); } function autoScroll(){ $('.chatBody').scrollTop($('.chatBody')[0].scrollHeight); } </script> </html>
執行
node app.js
開啟兩個瀏覽器,都輸入http://localhost:4333
,附上個演示視訊和截圖。自己和自己玩吧。獨自加班的夜晚就指它玩了:)