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实现一个简单的聊天室
前言 距离我写上一篇博客已经又过了一年半载了,时间过得很快,一眨眼,就把人变得沧桑了许多.青春是短暂的,知识是无限的.要用短暂的青春,去学无穷无尽的知识,及时当勉励,岁月不待人.今天写个随笔小结记录一 ...
随机推荐
- 020 Valid Parentheses 有效的括号
给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效.括号必须以正确的顺序关闭,"()" 和 "()[]{}" 是有效的 ...
- Bonetrousle HackerRank 数学 + 思维题
https://www.hackerrank.com/contests/world-codesprint-6/challenges/bonetrousle 给定一个数n,和k个数,1--k这k个,要求 ...
- UnityVR Steam_VR开发工具插件---VRTK 自带案例分析
- docker~aspnetcore2.0镜像安装软件的加速器
一般对于安装软件加速时,我们大多数会选择阿里云,而对于aspnetcore2.0这个进项来说,由于使用的是Debian操作系统,所有我们要找到它对应的mirror列表,下面是我整理的一个sources ...
- 深入理解C#中的IDisposable接口(转)
转自:https://www.cnblogs.com/wyt007/p/9304564.html 写在前面 在开始之前,我们需要明确什么是C#(或者说.NET)中的资源,打码的时候我们经常说释放资源, ...
- Linux远程连接和FTP
远程连接: ssh 用户名@IP地址 输入密码 FTP连接: sftp 用户名@IP 输入密码 远程连接支持所有命令,就相当于操作电脑 FTP连接只支持部分命令: ls.cd.get.put get: ...
- DataBinding 访问 3
MVVM中的Model 我们可以用任何POJO 作为 data binding 的 Model, 但是直接修改POJO对象,不能直接更新UI android的 dataBinding 模块 给提供了通 ...
- JAVA中面向对象
一.方法: 1.方法概述: 在JAVA中,方法就是用来完成解决某件事情或实现某个功能的办法. 2.方法的语法格式: 修饰符 返回值类型 方法名(参数类型 参数名1,参数类型 参数名2,.....){ ...
- <Android 基础（一）> Service
介绍 Service(服务)是一个没有用户界面的在后台运行执行耗时操作的应用组件.其他应用组件能够启动Service,并且当用户切换到另外的应用场景,Service将持续在后台运行.另外,一个组件能够 ...
- 构建第一个spring boot2.0应用之项目启动运行的几种方式（二）
方法一. 配置Run/Debug Configuration 选择Main Class为项目 Application启动类(入口main方法) (2).进行项目目录,即包含pom.xml的目录下,启 ...