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

node实现一个简单的聊天室（认识一下socket）的更多相关文章

  1. [SignalR]一个简单的聊天室

    原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...

  2. 用ServletContext做一个简单的聊天室

    这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...

  3. 基于websocket实现的一个简单的聊天室

    本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...

  4. ASP.NET Signalr 2.0 实现一个简单的聊天室

    学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...

  5. WebSocket介绍和一个简单的聊天室

    WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...

  6. 通过WebSocket实现一个简单的聊天室功能

    WebSocket WebSocket是一个协议,它是是基于TCP的一种新的网络协议,TCP协议是一种持续性的协议,和HTTP不同的是,它可以在服务器端主动向客户端推送消息.通过这个协议,可以在建立一 ...

  7. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

  8. 利用JavaUDPSocket+多线程模拟实现一个简单的聊天室程序

    对Socket的一点个人理解:Socket原意是指插座.家家户户都有五花八门的家用电器,但它们共用统一制式的插座.这样做的好处就是将所有家用电器的通电方式统一化,不需要大费周章地在墙壁上凿洞并专门接电 ...

  9. 使用ASP.NET SignalR实现一个简单的聊天室

    前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...

随机推荐

  1. C#读取Oracle Spatial的sdo_geometry

    oracle的sdo_geometry中内置get_wkt和get_wkb两个方法. 以数据库表geoms为例,此表中有id和geometry两列 try { OracleConnection con ...

  2. Seven-segment Display 贪心选择，快速判断能否有解

    https://csacademy.com/contest/round-39/task/seven-segment-display/ 可以知道,只有1是无解 而且肯定是选出来的位数约小越好. 位数 = ...

  3. Json 解析Json

    1.把LitJson导入到项目里面; 2.建一个下面的脚本,不挂在游戏对象上; 3.新建下面一个脚本,挂在相机上. using System.Collections; using System.Col ...

  4. discuz!X2头像无法显示解决方法

    discuz x2刚刚发布,很多站长就迫不及待地将自己的论坛升级. 可是安装完discuz X2之后,就马上发现论坛会的头像都不见了,取而代之的是一个小红叉.会员也没有办法设置自己的头像. 各位站长们 ...

  5. Aura Component Skills & Tools

    本篇参考: https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_vf_fundamentals 不知不觉已经做了三年多的 ...

  6. chrome浏览器表单自动填充默认样式-autofill

    Chrome会在客户登陆过某网站之后, 会自动记住密码 当你下次再次进入该网站的时候, 可以自由的选择登陆的账号, Chrome会为你自动填充密码. 而你无需再输入密码 这本身是一个很好的功能, 但是 ...

  7. Django的Serializers的使用

    Serializer 在这里通过一个验证用户身份的例子说明rest_framework中serializer.Serialize的使用. 编写serializer Serializer的使用不需要依赖 ...

  8. sass相关随笔

    安装 下载ruby并且安装 点击这里 打开命令行输入 gem install sass 我使用的是sublime text3 还需要下载三个插件 sass -- 可以帮助你语法高亮 sass buil ...

  9. spring 中使用quartz实现定时任务

    一般开发系统,使用定时任务非常常见.当然也可以用Java实现.比如定时器.大致如下: 1: public static void main(String[] args) { 2: Timer time ...

  10. LeetCode Missing Number （简单题）

    题意: 给一个含有n个整数的数组,数组中的元素应该是0-n.现在缺了其中某1个,找出缺少的那个整数? 思路: 0-n的总和是可以直接计算的,而缺少的那个就是sum减去数组的和. int missing ...