边学边理解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. (转)linux磁盘分区fdisk分区和parted分区

    linux磁盘分区fdisk分区和parted分区 原文:http://www.cnblogs.com/jiu0821/p/5503660.html ~~~~~~~~~~~~~~~~~~~~~~~~~ ...

  2. select 下拉框的复选

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdUAAAFSCAIAAAArbtLAAAAgAElEQVR4nOydd1gUWaK3Z2/YvXd3v7 ...

  3. Java继承改进

    一.java继承改进 首先,多继承的缺点: 1.继承多个父类,父类中方法名相同,产生歧义 2.父类中方法同名,子类未覆盖,也会歧义 所以,java改进,类只能单继承,接口可以多继承 接口中只有抽象方法 ...

  4. 《web-Mail服务的搭建》

    首先是搭建后台服务: 下载下面2个软件包 extmail-1.2.tar.gz extman-1.1.tar.gz 创建一个extsuite目录,固定格式 mkdir /var/www/extsuit ...

  5. ASP Session的功能的缺陷以及解决方案

    转http://www.cnblogs.com/jhy55/p/3376925.html 目前ASP的开发人员都正在使用Session这一强大的功能,但是在他们使用的过程中却发现了ASP Sessio ...

  6. 一起来学Spring Cloud | 第一章 ：如何搭建一个多模块的springcloud项目

    在spring cloud系列章节中,本来已经写了几个章节了,但是自己看起来有些东西写得比较杂,所以重构了一下springcloud的章节内容,新写了本章节,先教大家在工作中如何搭建一个多模块的spr ...

  7. iOS 基础笔试题

    参考:https://www.jianshu.com/p/1d3496bc5bda 1.#import 跟#include.@class有什么区别?#import<> 跟 #import& ...

  8. 移动端浏览器预览word、excel、ppt

    移动端浏览器没有自带预览office文档的工具,最近发现一个比较好用的工具,是office官方的工具,分享给大家: 官方文档地址: 用法:打开页面https://view.officeapps.liv ...

  9. 使用NIO快速复制Java文件

    package com.test.test; import java.io.File;import java.io.FileInputStream;import java.io.FileOutputS ...

  10. MVC 控制器向View传值的三种方法(转)

    1.提供视图模型对象 你能把一个对象作为View方法的参数传递给视图. public ViewResult Index() { DateTime date = DateTime.Now; return ...