node实现一个简单的聊天室（认识一下socket）

边学边理解node的高深，今天写了一个聊天室的demo，很简单，认识一下socket

node服务端代码

var express = require('express');
var app = express();
//session固定写法
var session = require('express-session');
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}));

//引入socket固定写法
var http = require('http').Server(app);
var io = require('socket.io')(http);

//渲染页面的ejs模板设置
app.set('view engine','ejs');

app.get('/',function(req,res,next){
    if(req.session.user){
        res.redirect("chat")
    }
    res.render("index")
})

var userList = [];

app.get('/user',function (req,res,next) {
    var user = req.query.username;
    if(!user) {
        res.render("index");
        return;
    }
    if (userList.indexOf(user) != -1){
        res.send("用户名已经被占用");
        return;
    }
    userList.push(user);
    req.session.user = user;
    res.redirect('/chat');
})

app.get('/chat',function (req,res,next) {
    if(!req.session.user){
        res.redirect('/');
        return;
    }
    res.render('chat',{
        "user":req.session.user
    })
})

io.on("connection",function(socket){
    socket.on("send",function(msg){
        io.emit("huida",msg)
    })
})

app.use(express.static('./public'));

http.listen(3000,'192.168.0.46');

首页ejs模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 500px;
            height: 70px;
            line-height: 70px;
            border: 1px solid #ddd;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top:0;
            margin: auto;
            text-align: center;
            background-color: #ddd;
        }
        input{
            height: 40px;
            padding: 5px;
        }
        #username {
            width: 300px;
        }
        #submit {
            width: 100px;
            height: 54px;
            padding: 5px;
        }
    </style>
</head>
<body>

<div class="container">
    <form action="/user" method="get">
        <input id="username" type="text" name="username" placeholder="请输入姓名">
        <input id="submit" type="submit" value="进入聊天室">
    </form>
</div>

</body>
</html>

聊天室页面ejs模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container,.chat-box {
            width: 500px;
            height: 500px;
            border: 1px solid #ddd;
            margin: 0 auto;

        }
        .chat-box {
            overflow: auto;
        }
        .chat-box h3 {
            height: 40px;
            line-height: 40px;
            background-color: #eee;
            padding-left: 10px;
        }

        .chat-box ul {
            padding: 20px;
        }

        li {
            list-style: none;
        }

        .text {
            width: 400px;
            height: 30px;
            line-height: 30px;
            padding: 5px 10px;
        }

        #btn {
            width: 70px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
        }
        .username{
            color: #e4393c;
        }
    </style>
    <script src="jquery-2.1.4.min.js"></script>
</head>
<body>

<div class="container">
    <div class="chat-box">
        <h3>欢迎<span class="username"> <%= user %> </span>来到聊天室</h3>
        <ul class="list">

        </ul>
    </div>
    <div>
        <input class="text" type="text" placeholder="输入内容">
        <input id="btn" type="submit" placeholder="发送">
    </div>
</div>



<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();

    var btn = document.getElementById('btn');
    btn.onclick = function () {
        var msg = $('.text').val();
        var username = $('.username').text();
        if(msg){
            socket.emit("send",{
                "text":msg,
                "user":username
            })
            $('.text').val('')
        }else {
            alert('聊天内容不能为空!')
        }
    }

    socket.on("huida",function (msg) {
        $('.list').prepend('<li><b>'+msg.user+' 说: </b>'+msg.text+'</li>')
    })

</script>
</body>
</html>

这个小demo可以带你理解一下socket，想深入理解者，自行百度，我只能帮你到这里！

posted @ 2017-09-22 17:43  段跃  阅读(758)  评论(0)  编辑  收藏  举报