1 Star 0 Fork 0

melin / Socket.ioLearning

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
index.html 2.83 KB
一键复制 编辑 原始数据 按行查看 历史
melin 提交于 2019-01-12 13:35 . feat: master, 20190112
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
.flex-container {
display: flex;
flex-direction: row;
min-height: 100vh;
}
.flex-container>.flex-item {
flex: 1;
justify-content: space-around;
align-items: flex-end;
display: flex;
flex-direction: column;
padding: 5px;
}
form {
display: flex;
flex-direction: row;
flex: 0 1 auto;
width: 100%;
border: 2px solid #000;
}
form input {
flex: 1;
border: 0;
padding: 10px;
}
form button {
flex: 0 1 auto;
padding: 5px;
background: rgb(130, 224, 255);
border: none;
}
.messages {
flex: 1;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
.messages li {
padding: 5px 10px;
}
.messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function () {
var socket = io();
$('#form1').submit(function (e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message1', $('#m1').val());
$('#m1').val('');
return false;
});
$('#form2').submit(function (e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message2', $('#m2').val());
$('#m2').val('');
return false;
});
socket.on('chat message1', function (msg) {
$('#messages1').append($('<li>').text(msg));
});
socket.on('chat message2', function (msg) {
$('#messages2').append($('<li>').text(msg));
});
});
</script>
</head>
<body>
<div class="flex-container">
<div class="flex-item">
<ul class="messages" id="messages1"></ul>
<form action="" id="form1">
<input id="m1" autocomplete="off" /><button>Send1</button>
</form>
</div>
<div class="flex-item">
<ul class="messages" id="messages2"></ul>
<form action="" id="form2">
<input id="m2" autocomplete="off" /><button>Send2</button>
</form>
</div>
</div>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/melinxie/Socket.ioLearning.git
git@gitee.com:melinxie/Socket.ioLearning.git
melinxie
Socket.ioLearning
Socket.ioLearning
master

搜索帮助

344bd9b3 5694891 D2dac590 5694891