Express+Socket.IO 實現簡易聊天室

時間 2019-11-18

標籤 express+socket.io express socket 實現簡易聊天室欄目系統網絡简体版

原文原文鏈接

代碼地址以下：
http://www.demodashi.com/demo/12477.htmljavascript

閒暇之餘研究了一下 Socket.io，搭建了一個簡易版的聊天室，若有不對之處還望指正，先上效果圖:
首先是登陸頁面:css

接下來就是聊天頁面:html

Socket.IO是Node.js的一個模塊，它提供經過WebSocket進行通訊的一種簡單方式，WebSocket協議很複雜，可是Socket.IO提供了服務器和客戶端雙方的組件，因此只須要一個模塊就能夠給應用程序加入對WebSocket的支持，並且還能支持不一樣的瀏覽器哦。關於其詳細介紹請參考官網SocketIO 官網，這裏呢咱們仍是直接上代碼。java

首先是建立 Socket 服務, 咱們的項目啓動文件 bin/www，咱們就來修改它:jquery

// bin/www
var app = require('../app');
var debug = require('debug')('websocket:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3070');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);
var io = require('socket.io').listen(server);   //建立 socket 服務
io.on('connection',function(socket){            //監聽客戶端的鏈接請求
  socket.emit('connected',"鏈接成功");
  socket.on('message',function(msg){            //監聽客戶端發送的消息
    console.log(msg);   
    socket.emit('content',msg);                 // 向客戶端發送反饋消息
    socket.broadcast.emit('content',msg);       // 向全部的已鏈接客戶端進行廣播消息
  });
});
/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
...
...

在這裏我作了一個小的登陸控制，也就是 session 的簡單使用，具體看下邊的路由控制:web

//  routes/index.js
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res) {
  res.render('login');
});
router.post('/login',function(req,res){
  var name=req.body.name;
  req.session.name=name;
  res.send("success");
});
router.get('/index',function(req,res){
  if(req.session.name!=null && req.session.name!=""){
    res.render('index',{name:req.session.name});
  }else{
    res.redirect('/');
  }
});
module.exports = router;

而後接下來建立客戶端登陸頁面:redis

// views/login.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登陸簡化聊天室</title>
    <link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/>
    <link rel="shortcut icon" href="images/chat.ico">
    <link rel="icon" href="img/images/chat.ico">
    <link rel="stylesheet" href="js/bootstrap.css" type="text/css" />
    <style>
        .tips{
            font-size: 28px;
            font-family: "楷體";
            padding: 10px;
        }
        .contentMain{
            width: 600px;
            height: 500px;
            position:absolute;
            left:35%;
            top:40%;
            z-index: 999;
        }
    </style>
</head>
<body>
<div class="loginImg" style="margin: 4% 0;">
    <img src="images/005.jpg" style="width: 100%;"/>
</div>

<div class="contentMain">
    <div class="row tips">請先輸入你在聊天室的暱稱 </div>
    <div class="row form-group">
        <span class="col-md-6">
            <input type="text" id="name" class="form-control" placeholder="暱稱"/>
        </span>
        <span class="col-md-3">
            <button class="btn btn-default" id="login">確認</button>
        </span>
    </div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script>
    $(function(){
       $('button').click(function(){
           var name=$('#name').val();
           $.post('/login',{name:name},function(data){
               if(data=="success"){
                   window.location.href='/index';
               }
           });
       })
    });
</script>
</body>
</html>

聊天室頁面:express

//  views/index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>簡化聊天室</title>
    <link rel="bookmark"  type="image/x-icon"  href="images/chat.ico"/>
    <link rel="shortcut icon" href="images/chat.ico">
    <link rel="icon" href="img/images/chat.ico">
    <link rel="stylesheet" href="js/bootstrap.css" type="text/css" />
    <style>
        body{
            font-size: 20px;
            font-family: "楷體";
        }
        .contentMain{
            width: 700px;
            height: 800px;
            position:absolute;
            left:5%;
            top:6%;
            z-index: 999;
        }
        .welcome{
            height: 6%;
            font-family: "楷體";
            font-size:35px;
            background-color: #d0e9c6;
        }
        .chatContent{
            height:600px;
            border-radius: 5px;
            border: 1px solid #555555;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 5px;
            margin-bottom: 20px;
        }
        .talkString{
            margin-top:15px;
        }
        .myTalk{
            border:1px solid #00B7FF;
            border-radius: 5px;
            width: auto;
            padding: 5px;
            background-color: #d6e9c6;
        }
        #content{
            padding:2px 10px 2px 10px;
        }
    </style>
</head>
<body>
<div class="welcome" align="center">
    歡迎您: <span id="name"><%=name%></span>
</div>
<div class="bgImage">
    <img src="images/005.jpg" style="width: 100%;height: 100%"/>
</div>
<div class="contentMain">

    <div class="chatContent">
        <span>聊天記錄:</span>
        <div id="content"></div>
    </div>
    <div class="row">
        <span class="col-md-10">
            <span class="col-md-2"> 內容:</span>
            <span class="col-md-10">
                <input type="text" id="myWord" class="form-control" placeholder="請輸入要發送的內容"/>
            </span>
        </span>
        <span class="col-md-2">
            <button class="btn btn-default">發送</button>
        </span>
    </div>
</div>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/socket.io.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

最後實現咱們客戶端的 socket，進行與服務端進行通訊:bootstrap

//   js/main.js
$(function(){
    var name = $('#name').text();
    // 向服務器發起鏈接請求
    var socket = io.connect('http://localhost:3070');
    socket.on('connected',function(){  // 監聽鏈接信息
        console.log('已鏈接');
        socket.send("系統："+name+" 鏈接成功");   // 向客戶端發送消息
    });
    socket.on('content',function(msg){          // 監聽服務器發送的消息
        var talker="";
        var talk="";
        var talkString="";
        if(msg.indexOf(':')>0){
            talker=msg.substring(0,msg.indexOf(':'));
            if(msg.indexOf("<script>")>0&&msg.indexOf("</script>")>0) {
                msg = msg.replace("<script>", "");
                msg = msg.replace("</script>", "");
            }
            talk=msg.substring(msg.indexOf(':')+1);
            if(talker==name){
                talkString="<div class='row talkString' align='right'>" +
                    "<span class='myTalk'>"+talk+"</span>" +
                    "<span> "+talker+"</span>" +
                    "</div>";
            }else{
                talkString="<div class='row talkString'>" +
                    "<span>"+talker+": </span>" +
                    "<span class='myTalk'>"+talk+"</span>" +
                    "</div>";
            }
        }else{
            talkString="<div class='row'>"+msg+"</div>";
        }
        $('#content').append(talkString);
        scrollBar();
    });
    $('button').click(function(){
        var myWord=$('#myWord').val();

        if(socket){
            socket.send(name+":"+myWord);
            $('#myWord').val("");
            scrollBar();
        }else{
            return;
        }
    });
    //回車發送消息
    document.onkeydown = function(e){
        var ev = document.all ? window.event : e;
        if(ev.keyCode==13) {
            $('button').click();
        }
    }

    function scrollBar(){
        $(".chatContent").scrollTop($(".chatContent")[0].scrollHeight);
    }
});

至此，咱們的主要工做基本上完成了，其實也沒有多少東西瀏覽器