node实现一个简单的聊天室(认识一下socket)

时间:2022-12-26 23:18:56

边学边理解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,想深入理解者,自行百度,我只能帮你到这里!