socket.io 实现简易聊天
客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
textarea{
resize: none;
}
.main1{
float: left;
}
#main{
float: left;
width: 400px;
height: 400px;
overflow-y: auto;
border: solid 1px blue;
}
.dialog{
width: 300px;
height: 50px;
margin: 20px 30px;
}
.course-btn {
width: 150px;
background-color: #00b33b;
font: 14px/40px "Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
height: 40px;
padding: 0 12px;
text-align: center;
color: #fff;
cursor: pointer;
margin-top: 20px;
border-radius: 2px;
}
.textRun{
display: none;
margin-left: 30px;
width: 300px;
}
</style>
</head>
<body>
<div class="main1">
<div class="dialog">
<input type="text" id="username" placeholder="请输入用户名">
<button onclick=dialog()>登录</button>
</div>
<div class="textRun">
<textarea name="" id="tv" cols="30" rows="10"></textarea>
<div onclick="textrun()" class="course-btn">发表评论</div>
</div>
</div> <div id="main"> </div>
<script src="js/socket.io.slim.js"></script>
<script>
var username;
function dialog () {
username = document.getElementById('username').value;
var DA = document.getElementsByClassName('dialog')[0];
if(username!='') {
socket.emit('dialog',username)
DA.style.display = 'none';
document.getElementsByClassName('textRun')[0].style.display = 'block';
}
}
function textrun () {
var text = document.getElementById('tv').value;
socket.emit('text',{name:username,text:text})
document.getElementById('tv').value = '';
}
var socket = io('http://localhost:3001') socket.on("text",function(data){
console.log(data)
var div = document.createElement('div');
var t = div.innerHTML = '<p>'+data.name+':'+data.text+'</p>';
var main = document.getElementById('main');
main.appendChild(div)
main.scrollTop = main.scrollHeight;
}) </script>
</body>
</html>
服务端：
var app = require('http').createServer();
var io = require('socket.io')(app);
var count = 0
var mapUsername = [];
function addEventLinsten(socket, event) {
socket.on(event, function(data){
for (var i in mapUsername) {
if(i){
mapUsername[i].emit(event, data)
}
}
})
}
// 连接
io.on('connection', function(socket){
count += 1
socket.num = count;
mapUsername[count] = socket
addEventLinsten(socket, 'dialog')
addEventLinsten(socket, 'text')
// 断开
socket.on('disconnect', function(){
delete(mapUsername[socket.num])
})
})
app.listen(3001);
console.log('socket 运行成功')
socket.io 实现简易聊天的更多相关文章
- Express+Socket.IO 实现简易聊天室
代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用
Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...
- Node+Express+MongoDB + Socket.io搭建实时聊天应用实战教程(二)--node解析与环境搭建
前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...
- Node+Express+MongoDB+Socket.io搭建实时聊天应用实战教程(一)--MongoDB入门
前言 本文并不是网上流传的多少天学会MongoDB那种全面的教程,而意在总结这几天使用MongoDB的心得,给出一个完整的Node+Express+MongoDB+Socket.io搭建实时聊天应用实 ...
- 示例：Socket应用之简易聊天室
在实际应用中,Server总是在指定的端口上监听是否有Client请求,一旦监听到Client请求,Server就会启动一个线程来响应该请求,而Server本身在启动完线程之后马上又进入监听状态. 示 ...
- 使用socket.io打造公共聊天室
最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...
- node及socket.io实现简易websocket双向通信
技术栈: vue2.0 + node + websocket( socket.io ) 1. 安装依赖 初始化vue项目后输入下方指令安装依赖包 // 推荐cnpm安装 npm i vue-socke ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- node+express+socket.io制作一个聊天室功能
首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http ...
随机推荐
- mitmproxy（中间人攻击工具）安装及使用
一.安装 执行命令,报错 pip install mitmproxy 根据提示安装vc++14后重新执行正常安装. 查看版本号: mitmproxy --version Error: mitmprox ...
- hdu 6006 Engineer Assignment 状压dp
Engineer Assignment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- java中捕获Oracle异常
try{ } catch (Exception e){ String msg=.getMessage(): int index= msg. toUpperCase(). indexOf("O ...
- hyperledger fabric相关记录
打开对接监控软件(statsd或者prometheus)开关 每个peer上 CORE_OPERATIONS_LISTENADDRESS=peer0.orgxxxxxxxxx:9443 CORE_ME ...
- iphone上mitmproxy证书设置
PC端安装mitmproxy并添加证书后,基本问题不大,都能正常运行起来 手机端iphone上下载安装mitmproxy证书: 1.手机和PC在同一个局域网中,设置wifi代理为PC端的ip,端口为m ...
- [GXOI/GZOI2019]宝牌一大堆
感觉比ZJOI的麻将要休闲很多啊. 这个题就是一个最优化问题,没有面子的特殊牌型可以直接用复杂度较低的贪心判掉. 有面子的话就是一个经典dp.(曾经还在ZJOI写过这个毒瘤东西 大概就是存一下对子,面 ...
- hadoop 安装之 hadoop、hive环境配置
总结了一下hadoop的大致安装过程,按照master . slave的hadoop主从类别,以及root和hadoop集群用户两种角色,以职责图的方式展现,更加清晰一些
- 【Mybatis】【3】mybatis Example Criteria like 模糊查询
正文: 在Java中使用Mybatis自动生成的方法,like需要自己写通配符 public List<TableA> query(String name) { Example examp ...
- python3.7导入gevent模块报错的解决方案
最近更新了python解释器3.7 结果安装gevent,在导入gevent之后就报错了,错误信息如下 RuntimeWarning: greenlet.greenlet size changed, ...
- Mock.js——数据模板定义
1. 安装 npm install mockjs --save-dev //安装开发依赖 2. 数据模板定义规则 Mock.mock({...}) String: 'string|num1-num2' ...