边学边理解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. Python 魔术方法及调用方式

    魔术方法 调用方式 解释 __new__(cls [,...]) instance = MyClass(arg1, arg2) __new__ 在创建实例的时候被调用 __init__(self [, ...

  2. 记一次内存溢出java.lang.OutOfMemoryError: unable to create new native thread

    一.问题: 春节将至,系统访问量进入高峰期.随之系统出现了异常:java.lang.OutOfMemoryError: unable to create new native thread.在解决这个 ...

  3. java NIO-java.io

    1. 传统IO-面向流 1.1 基于字节的IO接口 In/OutputStream 1.2 基于字符的IO接口 Reader/Writer Reader提供抽象方法: int read(char cb ...

  4. Mybatis-Plus使用全解

    前言 之前写了<SpringBoot | 第九章:Mybatis-plus的集成和使用>一文,只是简单的使用条件构造器列举了一些通用的CURD操作.本人也想写一篇通用的关于mybatis- ...

  5. mysql数据库初步了解

    一丶数据库服务器丶数据管理系统丶数据库丶表与记录的关系 记录:1 xxxx 3245646546(多个字段的信息组成一条记录,即文件中的一行内容) 表: Student.school,class_li ...

  6. Android 5.0以上获取系统运行进程信息

    在Android 5.0以上系统,调用getRunningAppProcesses 方法返回的列表为空,这是因为谷歌考虑到安全原因,已经把这个方法移除掉了, 那以后要获取系统运行的后台进程这个方法用不 ...

  7. Android studio 配置忽略

    直接在Ignored Files选项里点击+号,在弹出的对话框选择第二项,然后依次输入上面包含的 .gradle .idea build 三个文件夹目录,再选择第一项,找到local.properti ...

  8. 微软AI发布会，集齐六大亮点召唤黑科技！

    7月12日,微软合作伙伴大会Inspire在华盛顿特区如火如荼地举行.同一天,在相隔5个时区的伦敦,微软还举办了一场关于人工智能的发布会.这是一场智能技术和情感体验两相交融的科技盛宴,既有黑科技,也有 ...

  9. ConcurrentHashMap源码刨析（基于jdk1.7）

    看源码前我们必须先知道一下ConcurrentHashMap的基本结构.ConcurrentHashMap是采用分段锁来进行并发控制的. 其中有一个内部类为Segment类用来表示锁.而Segment ...

  10. Java interface和abstract小记

    一.abstract 用abstract修饰的类叫做抽象类,用abstract修饰的方法叫抽象方法. 含有抽象方法的类必须被声明为抽象类,抽象类必须被继承,抽象方法必须被重写. 抽象类不能被实例化. ...