html5的新通讯技术socket.io，实现一个聊天室
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.user{
color:lightskyblue;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="text-center">欢迎来老王聊天室</h4>
</div>
<div class="panel-body">
<ul class="list-group" id="messageUl"> </ul>
</div>
<div class="panel-footer">
<div class="row">
<div class="col-md-10">
<input id="txtMsg" class="form-control" type="text" onkeydown="handleKeyDown(event)">
</div>
<div class="col-md-2">
<button class="btn btn-default" onclick="send()">发送
<span class="glyphicon glyphicon-send"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading">
<h4>在线用户</h4>
</div>
<div class="panel-body">
<ul class="list-group" id="userUl"></ul>
</div>
<div class="panel-footer">
<h4 id="onlineUsers">在线人数 0</h4>
</div>
</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>
let txtMsg = document.querySelector('#txtMsg');
let onlineUsers = document.querySelector('#onlineUsers');
//此脚本会在window上增加一个io的属性
//http://localhost:8080/=/=空
let socket = io();
//当客户端连接服务器成功之后,向后台发送一个消息，问一下现在有哪些在线用户
socket.on('connect',function(){
socket.emit('users');
});
let messageUl = document.querySelector('#messageUl');
let userUl = document.querySelector('#userUl');
//监听服务器发过来的消息
socket.on('message',function(msgObj){
let li = document.createElement('li');
li.className = 'list-group-item';
li.innerHTML = `${msgObj.username}:${msgObj.content} <span class="pull-right">${new Date(msgObj.createAt).toLocaleString()}</span>`;
messageUl.appendChild(li);
});
socket.on('userList',function(userList){
userUl.innerHTML = userList.map(item=>(
`<li class="list-group-item">${item}</li>`
)).join('');
countUser();
});
socket.on('user-added',function(username){
let li = document.createElement('li');
li.className = 'list-group-item';
li.innerHTML = `<span class="user">${username}</span>`;
userUl.appendChild(li);
countUser();
});
function countUser(){
onlineUsers.innerHTML = `在线人数 ${userUl.children.length}`;
}
//发送事件
function send(){
let content = txtMsg.value;//先拿到聊天的内容
socket.send(content);
txtMsg.value = '';
}
function handleKeyDown(event){
if(event.keyCode == 13)
send();
}
//给父级绑定点击事件 事件委托
//要判断点的是span而非别的元素
userUl.addEventListener('click',function(event){
//如果事件源的类名是user的话
if(event.target.className == 'user'){
let username = event.target.innerHTML;
txtMsg.value = `@${username} `;
}
})
</script>
</body>
</html> <!--npm i express socket.io -S -->
后台node
let express = require('express');
let path = require('path');
let app = express();
app.get('/',function(req,res){
res.sendFile(path.resolve('index.html'));
});
let server = require('http').createServer(app);
//socket.io是依赖http服务器
let io = require('socket.io')(server);
//声明一个对象，保存所有的客户端用户名和它们的socket对应关系
let clients = {};
//监听客户端的连接，当连接到来的时候执行此回调函数
io.on('connection',function(socket){
//在函数的内部声明一个变量，叫username
let username;
//监听客户端的发过来的消息，当消息发过来的时候执行回调函数
socket.on('message',function(data){
if(username){
//判断是公聊还是私聊
let reg = /@([^ ]+) (.+)/;
let result = data.match(reg);
if(result){//如果result有值则匹配上了
//此处是私聊
let toUser = result[1];
let content = result[2];
clients[toUser] && clients[toUser].send({
username,
content,
createAt:new Date()
});
}else{//没匹配上
//正常发言，向所有的客户端进行广播
io.emit('message',{
username,content:data,createAt:new Date()
});
}
}else{
username = data;//把这个消息当成用户名
//关联起来
clients[username]= socket;
//向所有的客户端广播说有新的用户加入聊天室
io.emit('message',{
username:'系统',content:`欢迎 ${username} 加入聊天室`,createAt:new Date()
});
//事件的名字可以自定义
io.emit('user-added',username);
}
});
//监听客户端发过来的请求，把用户数组返回
socket.on('users',function(){
let userList = Object.keys(clients);
socket.emit('userList',userList);
});
});
server.listen(8080);
/**
* 1.实现匿名聊天
* 1. 在客户端里连接上服务器
* 2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取文本框的内容，把文本框的内容发送到后台
* 3. 后台服务器把此消息广播给所有的客户端。
* 4. 所有的客户端收到消息后把此消息在ul列表里显示出来
* 2.实现具名聊天
* 1. 当此用户第一次向服务器发消息的时候
* 2. 服务器会判断此客户端的用户名是否设置过，如果没设置的话就把这个消息当成用户名，以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言
* 3. 私聊
* 1. 点击某个在线用户，点击后会在输入框里出现 @xxx yyy
* 2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息
* 3
*
*/
html5的新通讯技术socket.io，实现一个聊天室的更多相关文章
- 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...
- node+express+socket.io制作一个聊天室功能
首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http ...
- Express+Socket.IO 实现简易聊天室
代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...
- 使用socket.io打造公共聊天室
最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...
- Socket.io文字直播聊天室的简单代码
直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室
一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...
- 实时通讯之Socket.io
WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.使用WebSocket,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成 ...
- vue + socket.io实现一个简易聊天室
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...
随机推荐
- js数组去重的三种方式的比较
做前端的,一般实现功能是主要的,但是重中之重却是在做到功能完善的情况下提高性能. 1.遍历数组法 实现的思路:构建一个新的数组存放结果,for循环中每次从原数组中取出一个元素,用这个元素循环与结果数组 ...
- Bloom Filter概念和原理【转】
Bloom Filter概念和原理 Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并能判断一个元素是否属于这个集合.Bloom Filter的这种高效是有 ...
- 【转载】SQL Server 2012 日志传送
SQL Server 2012 日志传送 一.准备: 数据库为完全恢复模式,并事先做一次完全备份. 共享一个文件夹,主机备份放在这个文件夹,而且客户机有权访问这个共享文件夹. 二.基本配置 1.启动配 ...
- iptables规则的关系
iptables规则的关系,是自上而下进行过虑的.所以添加规则时,要通过文件进行添加,这样的话,可以控制其顺序. A机器: [root@www ~]# netstat -an | grep 6100 ...
- QT 学习笔记概述
以下笔记为在看书和实践的过程中的部分记录总结: 0. 窗口布局 1) 支持绝对布局和布局管理器布局; 2) 绝对布局不够灵活.无法自动调整大小,需要手动编写代码调整: 3) 布局管理器管理布局比较灵活 ...
- Android（java）学习笔记182：多媒体之撕衣服的案例
1.撕衣服的案例逻辑: 是两者图片重叠在一起,上面我们看到的是美女穿衣服的图片,下面重叠(看不到的)是美女没有穿衣服的图片.当我们用手滑动画面,上面美女穿衣服的图片就会变成透明,这样的话下 ...
- ubuntu命令行转换图片像素大小
convert -resize 512x256 00433.png 00001.png 1.512和256之间是x(就是字母那个x),用' * '反而会报错 2.这个命令会按照原图的比例进行转换 3. ...
- Wow64
翻译自Wikipedia: WoW64 运行在微软平台上,WoW64(Windows 32-bit on Windows 64-bit) 是一个Windows的子操作系统, 它能运行32位的应用,在所 ...
- js模块化入门与commonjs解析与应用
JS模块化的基本原理 commonjs规范 commonjs在前端模块化中的基本使用 AMD与CMD规范剖析博客链接 一.JS模块化基本原理 在JS没有提出来模块化的时候,开发JS项目比较简单,同时也 ...
- linux下使用docker方式部署ftp服务器
linux环境下部署vsftpd比较繁琐,可以直接使用docker官方仓库中的pure-ftpd镜像来部署ftp服务器. 下载镜像 docker pull stilliard/pure-ftpd:ha ...