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，想深入理解者，自行百度，我只能帮你到这里！
node实现一个简单的聊天室（认识一下socket）的更多相关文章
- [SignalR]一个简单的聊天室
原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...
- 用ServletContext做一个简单的聊天室
这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...
- 基于websocket实现的一个简单的聊天室
本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...
- ASP.NET Signalr 2.0 实现一个简单的聊天室
学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...
- WebSocket介绍和一个简单的聊天室
WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...
- 通过WebSocket实现一个简单的聊天室功能
WebSocket WebSocket是一个协议,它是是基于TCP的一种新的网络协议,TCP协议是一种持续性的协议,和HTTP不同的是,它可以在服务器端主动向客户端推送消息.通过这个协议,可以在建立一 ...
- 如何用WebSocket实现一个简单的聊天室以及单聊功能
百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...
- 利用JavaUDPSocket+多线程模拟实现一个简单的聊天室程序
对Socket的一点个人理解:Socket原意是指插座.家家户户都有五花八门的家用电器,但它们共用统一制式的插座.这样做的好处就是将所有家用电器的通电方式统一化,不需要大费周章地在墙壁上凿洞并专门接电 ...
- 使用ASP.NET SignalR实现一个简单的聊天室
前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...
随机推荐
- jdbc操作步骤
package com.itheima.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql ...
- ElasticSearch 全文检索— ElasticSearch概述
ElasticSearch 产生背景 1.海量数据组合条件查询 2.毫秒级或者秒级返回数据 Lucene 定义 lucene是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一 ...
- yii2 AR模型使用exists添加子查询与父查询关联
有A,B两个表对应A_AR,B_AR两个模型B表interval_id对应A表id现在要查a表的数据,且没有code为a的子数据要求使用yii2的AR模型写查询: A_AR::find()->w ...
- JNA-调用win32 Dll文件
1. 描述备注 参考地址1 JNA示例代码 1.1 JNA工作原理 JNA是建立在JNI技术基础之上的一个Java类库,它使您可以方便地使用java直接访问动态链接库中的函数. 原来使用JNI,你必须 ...
- 白话SpringCloud | 第一章：什么是SpringCloud
前言 作为SpringCloud的正式第一章,我们先来简单了解下SpringCloud相关知识点吧,内容可能比较多. 何为微服务 传统单体架构 服务化架构 微服务架构 什么是SpringCloud 核 ...
- 前端专业术语： shim 和 Polyfill，了解下
在学习和使用 JavaScript 的时候,我们会经常碰到两个术语:shim 和 polyfill.它们有许多定义和解释,意思相近又有差异. Shim Shim 指的是在一个旧的环境中模拟出一个新 A ...
- iOS开发之数据存取
http://www.cocoachina.com/ios/20141111/10190.html
- NEO
平台: Windows 类型: 虚拟机镜像 软件包: .net core neo application server basic software blockchain neo open sourc ...
- pg中的非varchar类型的模糊搜索
模糊搜索,bay字段是 numeric 类型的(如果是 varchar 类型的用常规的即可) 1,SELECT * FROM s_view_monitor_result WHERE bay ~~ CA ...
- jQuery-显示与隐藏不用判断的快捷方法
功能:显示被隐藏的元素,隐藏已显示的元素. 常规方法:(需要先判断元素状态) $("button").click(function(){ if ($(".content& ...