边学边理解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. Vue源码学习之数据初始化

    首发地址:CJWbiu's Blog 在这里思考一个问题,使用Vue的时候需要在创建Vue实例时传入一个option,这里包含了我们定义的props.methods.data等.而在methods的方 ...

  2. 032 Longest Valid Parentheses 最长有效括号

    给一个只包含 '(' 和 ')' 的字符串,找出最长的有效(正确关闭)括号子串的长度.对于 "(()",最长有效括号子串为 "()" ,它的长度是 2.另一个例 ...

  3. linux目录权限

    linux中,有三种不同类型的用户可以对文件或目录进行访问:文件所有者,同组用户,其他用户.所有者一般是文件的创建者,文件所有者自动拥有对该文件的读.写和可执行权限.所有者能允许同组用户有权访问文件, ...

  4. Git忽略提交规则

    Git忽略提交规则 转自:https://www.cnblogs.com/kevingrace/p/5690241.html 在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等 ...

  5. 物体检测丨浅析One stage detector「YOLOv1、v2、v3、SSD」

    引言 之前做object detection用到的都是two stage,one stage如YOLO.SSD很少接触,这里开一篇blog简单回顾该系列的发展.很抱歉,我本人只能是蜻蜓点水,很多细节也 ...

  6. CheatEngine-内存修改

    0.备注+待完成 //备注 a). 如果有方括号,就是说CE认为找 到了数值的指针了 //待完成 a). 自动导出外挂 b). 菜单栏中"表单"下的lua是做什么用的 c). CE ...

  7. 搭建Node.js Redis开发环境

    创建项目 初始化为node项目 $npm init   安装redis   安装@types/node, @types/redis, typescript   初始化TypeScript   配置ts ...

  8. java中调用ElasticSearch中文分词ik没有起作用

    问题描述: 项目中已经将'齐鲁壹点'加入到扩展词中,但是使用客户端调用的时候,高亮显示还是按照单个文字分词的: 解决方案: 1.创建Mapping使用的分词使用ik 2.查询使用QueryBuilde ...

  9. asp.net MVC 4.0 Controller回顾——ModelBinding实现过程

    以DefaultModelBinder为例 为简单模型绑定(BindSimpleModel)和复杂模型绑定(BindComplexModel) public virtual object BindMo ...

  10. Android Service创建USB HOST通信

    之前做了一个关于Android USB通信的Case,通过Android的USB总线给Zigbee供电,和板载的Zigbee(基于Zigbee的自组网)进行通信.要使用Android的USB Host ...