我们需要Node.js
一、先来个最终效果图,我做的是手机端网页,不过用电脑也可
哎呦,还不错吧,虽然我的聊天室极简,但也保证你的学习难度不会太大哦。
二、开始准备工作,下载node.js吧
注意:一会儿记得给你的npm和cnpm加个环境变量
博客园的node.js安装链接在此!!!
好的,如果你用这个保姆级链接安装node.js依然没有真正成功(你后面的聊天室搭建一定会出现问题),在我的实践下,错误大概是:
1、不要把node安装到c盘,c盘的文件操作是需要管理员权限的,而node的操作是依赖你的cmd面板的,一般来说cmd面板一开始是不会开启管理员权限的。
2、如果你真的安装在c盘,后面出现问题,可以打开cmd面板的管理员模式,再进一步操作与node有关的事情。
开始写我们的聊天室吧
一、在桌面创建一个文件夹,名字为app
二、在app文件夹内创建两个文件(不用往里面写东西,创建即可)
三、把这段代码放入index.html里(记事本打开放入即可,若你有编译器更好)
<!doctype html>
<html>
<head>
<title>客户群聊界面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: '微软雅黑'
}
#container {
width: 100%;
height: 1700px;
background: #eee;
position: relative;
box-shadow: 40px 40px 110px #777;
}
.header {
background: #25421ab0;
height: 80px;
color: #fff;
line-height: 68px;
font-size: 40px;
padding: 0 20px;
}
body {
width: 100%;
background: #eee;
position: relative;
font: 60px;
}
form {
background: #000;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
width: 80%;
font-size: 40px;
}
form button {
width: 20%;
background: rgb(130, 224, 255);
border: none;
font-size: 40px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 40px;
}
#messages li {
padding: 5px 10px;
font-size: 40px;
}
#messages li:nth-child(odd) {
background: #eee;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="header">
<span style="float: left;">客户交流平台</span>
<!--<span style="float: right;">14:21</span>-->
</div>
<ul id="messages"></ul>
<form action="">
<input id="m" placeholder="说点什么吧..." autocomplete="off" /><button>发送</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var name = prompt("请输入你的昵称:");
var socket = io()
//发送昵称给后端,并更改网页title
socket.emit("join", name)
document.title = name + "的群聊"
socket.on("join", function (user) {
addLine(user + " 加入了群聊")
})
//接收到服务器发来的message事件
socket.on("message", function (msg) {
addLine(msg)
})
//当发送按钮被点击时
$('form').submit(function () {
var msg = $("#m").val() //获取用户输入的信息
socket.emit("message", msg) //将消息发送给服务器
$("#m").val("") //置空消息框
return false //阻止form提交
})
function addLine(msg) {
$('#messages').append($('<li>').text(msg));
}
</script>
</html>
四、下面这段js代码当然是放到server.js中了
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var usocket = [];
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
console.log('a user connected')
socket.on("join", function (name) {
usocket[name] = socket
io.emit("join", name)
})
socket.on("message", function (msg) {
io.emit("message", msg) //将新消息广播出去
})
});
http.listen(3000, function() {
console.log('listening on *:3000');
});
五、给你的文件夹安装点东西
NO.1 复制路径
NO.2 桌面属于c盘,我的node也安装在c盘,我当然是用管理员模式运行cmd啦,就是哪个命令提示符黑面板啦。
NO.3 cd一下你刚刚的app位置路径,就能在面板内打开文件夹(命令行操作开始,这就是1984年麦金塔系统以前操作电脑文件的方式)
NO.4 输入
cnpm install --save express
如图,你的文件夹里就多了两个东西
NO.5 再输入
cnpm install --save socket.io
哎呦,至此你的node聊天室环境搭建完成,至于socket是什么,感兴趣可以百度一下。
大功告成
输入
node server.js
下面出现一句 listening *:3000
至此,你的面板不要关,只需要打开浏览器,输入localhost:3000,即可访问自己的聊天室啦
最后一个问题
当然,你的聊天室不仅仅希望只有自己的电脑能访问吧,实际上,只需要你的朋友跟你在同一局域网内(通俗来说就是连同一个WiFi),然后你在面板内运行一句node server.js
,你的朋友通过你的电脑的ip地址:3000
(我就不示范了,毕竟暴露自己电脑的ip太危险啦)就能蹦进你的聊天室和你聊天啦,注意啦,就是把localhost
这个单词换成你真正的ip地址
就可以啦!如果你希望更多的人访问你的聊天室,就把网址放上服务器。
-----------------------------------------