服务端代码
//1.引入框架
var express = require("express");
//创建服务
var app = express();
//创建http服务
var server = require('http').Server(app);
//创建socket.io服务
var io = require('socket.io')(server);
//设置静态资源
app.use(express.static('node_modules'));
//设置模板引擎
app.set('view engine','ejs');
//设置ejs模板路径
app.set('views','./views');
//设置路由
app.get("/",function(req,res){
res.render('lts');
res.end();
})
//监听端口
server.listen(8090);
//连接socket.io
io.on('connection',function(socket){
socket.on('h556',function(data){
//console.log(data);
//将服务端的信息发送到聊天室中
//broadcast 将接收到的所有信息广播出去
socket.broadcast.emit('h556',data)
})
})
客户端代码
<script>
//连接
var socket = io.connect("/");
//定义一个名字
var name = prompt('请输入您的名字');
//给发送按钮绑定单击事件
$('.send').click(function(){
//alert(123);
//获取文本域中输入的数据
var v = $('textarea').val();
//console.log(v);
if(v==""){
alert('发送的信息不能为空');
}else{
var me = $('#kuang .left').clone();
me.find('.mc').html(name);
me.find('.mn').html(v);
//把克隆的节点放到top中
$('.top').append(me);
$('textarea').val('');
socket.emit('h556',{name:name,data:v})
}
})
//敲击回车发送消息
$(window).keydown(function(e){
//console.log(e);
if(e.keyCode == 13){
//发送消息(trigger函数:让左边的元素,执行一次指定的事件)
$('.send').trigger('click');
return false;
}
})
socket.on('h556',function(data){
console.log(data);
var right = $('#kuang .right').clone();
right.find('.oc').html(data.data);
right.find('.cn').html(data.name);
$('.top').append(right);
})
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入socket.io -->
<script src="/socket.io/socket.io.js"></script>
<script src="/jquery/dist/jquery.min.js"></script>
<style>
.max{
width:50%;
height:600px;
margin:0px auto;
margin-top:100px;
border:10px solid #999;
padding-top:10px;
}
.left{
width:100%;
border-bottom:1px solid #999;
height:40px;
}
.right{
width:100%;
height:40px;
border-bottom:1px solid #999;
}
.top{
width: 100%;
height:400px;
}
#kuang{
display: none;
}
.l{
float:left;
}
.r{
float:right;
}
</style>
<title>聊天室</title>
</head>
<body>
<button id="btn">点我啊</button>
<div class="max">
<!-- 聊天的区域 -->
<div class="top">
</div>
<div>
<textarea name="" id="" cols="98" rows="5"></textarea>
</div>
<div id="kuang">
<div class="left">
<span class="l mc"><b>海峰</b>:</span><span class="mn">宝贝~~想你了</span>
</div>
<div class="right">
<span class="r oc">讨厌~死鬼!</span><span class="r cn"><b>牟楠:</b></span>
</div>
</div>
<div>
<button class="send">发送</button>
</div>
</div>
</body>
版权声明：本文为qq_38998319原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。