用socket.io写实现简易聊天室，可以直接发送一个对象，不用websoket那样，先建立对象，再转换字符串了;还可以自定义事件，即不用像websocket一样去定义type
socket.io安装及聊天室的实现
官网地址https://www.socket.io
从网站上可以学些基础语法，并下载script标签内容
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
同样需要先安装socket
npm install socket.io
然后将下载的 socket.io.js保存到本地，并在html中引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>俄罗斯方块2</title>
<script src="socket.io.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script> -->
</head>
<body>
<h1>聊天室——Websocket</h1>
<input type="text" id="sendTxt" />
<button id="sendb">发送</button>
<script type="text/javascript">
var socket = io('ws://localhost:3000')
// 添加div到页面
function showMessage(str, type) {
var div = document.createElement("div");
div.innerHTML = str;
if (type == "enter") {
div.style.color = "blue";
} else if (type == "leave") {
div.style.color = "red";
}
document.body.appendChild(div);
}
document.getElementById("sendb").onclick = function () {
var txt = document.getElementById("sendTxt").value;
if (txt) {
socket.emit('message', txt);
}
// document.getElementById("recv").innerHTML = "Connected";
// innerHTML 可以 获取 也可以 插入 //
};
socket.on('enter', function (data) {
showMessage(data, 'enter')
})
socket.on('message', function (data) {
showMessage(data, 'message')
})
socket.on('leave', function (data) {
showMessage(data, 'leave')
})
</script>
</body>
</html>
JS部分也变得十分的简洁
var app = require('http').createServer();
// 用socket封装app
var io = require('socket.io')(app);
var PORT = 3000;
var clientCount = 0;
app.listen(PORT);
io.on('connection', function (socket) {
// 连接上客户端之后
clientCount++;
socket.nickname = "user" + clientCount;
io.emit('enter', socket.nickname + "进入聊天室")
socket.on('message', function (str) {
io.emit('message', socket.nickname + '说：' + str)
})
socket.on('disconnect', function () {
io.emit('leave', socket.nickname + '离开聊天室')
})
})
console.log("websocket server listening on port" + PORT);
完工！！！
配置gitignore,忽略一些不需要的文件的推送
1.对应文件夹下创建一个.gitignore文件
2.在创建的.gitignore文件中建立规则，去忽略一些不需要的文件的推送
规则如下：
bin/: 忽略当前路径下的bin文件夹，该文件夹下的所有内容都会被忽略，不忽略 bin 文件
/bin: 忽略根目录下的bin文件
/.c: 忽略 cat.c，不忽略 build/cat.c
debug/.obj: 忽略 debug/io.obj，不忽略 debug/common/io.obj 和 tools/debug/io.obj
/foo: 忽略/foo, a/foo, a/b/foo等
a//b: 忽略a/b, a/x/b, a/x/y/b等
!/bin/run.sh: 不忽略 bin 目录下的 run.sh 文件
*.log: 忽略所有 .log 文件
config.php: 忽略当前路径的 config.php 文件
当.gitignore配置无效的时候，可能是因为：
1.命令的格式错了
2.在gitignore配置文件里加入了空格、tab、注释等，导致语句失效
3.配置语句对add commit文件无效，即文件已经被追踪过了，而新建的gitignore只可以追踪没有被追踪过的文件，则此时需要删除本地的缓存，再重新追踪，即
git rm -r --cache .
git add .
git commit -m'配置gitignore'
git push
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
