zoukankan      html  css  js  c++  java
  • 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,想深入理解者,自行百度,我只能帮你到这里!

  • 相关阅读:
    truncate table
    SSIS学习笔记
    Bing Developer Assistant开发随记
    数组中的逆序对
    第一个只出现一次的字符
    丑数
    把数组排成最小的数
    连续子数组的最大和
    最小的k个数
    数组中出现次数超过一半的数字
  • 原文地址:https://www.cnblogs.com/duanyue/p/7576126.html
Copyright © 2011-2022 走看看