服务端:
高雅、koa-route koa-websocket,请求。
客户端:
html, css, javascript, websocket。
远程聊天API:
, http://api.qingyunke.com/api.php& # 63;关键=free& appid=0,味精味精。
1。在桌面创建bbs文件夹,然后在文件夹内打开cmd,输入:
<代码>美元npm init
初始化箱项目,生成package.json包管理文件
2. cmd输入:
<代码> npm美元安装高雅——保存
安装高雅。
3. cmd输入:
<代码> npm安装koa-route美元——保存
安装高雅路由模块。
4. cmd输入:
<代码> npm安装koa-websocket美元——保存
安装koawebsocket模块。
我的package.json:
{
“名称”:“论坛”,
“版本”:“1.0.0”,
“描述”:“”,
“主要”:“server.js”,
"脚本":{
“测试”:“echo \”的错误:没有测试指定\”,,退出1”,
“开始”:“节点server.js”
},
“作者”:“”,
“许可证”:“ISC”,
“依赖”:{
“高雅”:“^ 2.8.1发布”,
:“koa-route ^ 3.2.0”,
:“koa-websocket ^ 0”
}
}
5。在bbs文件夹中新建server.js,项目启动入口文件。
添加内容如下:
const高雅=要求(“高雅”),
路线=要求(“koa-route”),
websockify=要求(“koa-websocket”),
http=要求(“http”),
应用=websockify(新高雅());
app.ws.use(路线。('/',ctx=比;{//websocket作为“ctx.websocket”添加到上下文中。
ctx.websocket。(“消息”,消息=比;{
startRequest(消息、ctx);
}）;
}))；
函数startRequest(消息,ctx) {//采用http模块向服务器发起一次得到请求
http.get (' http://api.qingyunke.com/api.php& # 63;关键=free& appid=0,味精=$ {encodeURI(消息)}’,res=比;{//防止中文乱码
res.setEncoding (“utf - 8”);//监听数据事件,每次取一块数据
res.on(“数据”,块=比;{
ctx.websocket.send (JSON.parse(块).content);
}）;
})。(‘错误’,呃=比;{
ctx.websocket.send('对不起,网络故障了');
});}//监听端口,启动程序
app.listen(3000年,呃=比;{
如果(err)把犯错;
console.log (“websocket服务器启动在3000端口”);
})
假如对server.js还不清楚的,可以留言或者邮件咨询我。
6。在bbs文件夹中新建index . html文件,作为客户端展示文件。
添加内容如下:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>实时聊天室& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/index.css "比;
& lt;/head>
& lt; body>
& lt; div类="盒子"比;
& lt; div类="标题"祝辞实时聊天室& lt;/div>
& lt; div类=笆淙肟颉北?
& lt;输入类="输入"占位符=蹦阆胨凳裁础眛ype="文本" id=皃l/比;
& lt; div类="发送" id=疤峤弧痹诜⑺? lt;/div>
& lt;/div>
& lt; div类="视图" id=皍lView”比;
& lt; ul id="视图"祝辞& lt;/ul>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/index.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
7。在bbs文件夹中新建index.css,客户端的样式。
内容如下:
* {
填充:0;
保证金:0;
-webkit-user-select:没有;
-moz-user-select:没有;
}
超文本标记语言
身体{
高度:100%;
宽度:100%;
background - color: # 333;
位置:相对;
字体大小:12 px;
}
.box {
位置:绝对的;
上图:50%;
左:50%;
变换:翻译(-50%,-50%);
background - color: # eee;
宽度:320 px;
身高:564 px;
box-sizing: border-box;
}
.title {
高度:40像素;
行高:40像素;
text-align:中心;
background - color: # 000;
颜色:# fff;
位置:相对;
字体大小:16 px;
}
.input-box {
margin-top: 10 px;
位置:绝对的;
底部:0;
background - color: # fff;
宽度:100%;
高度:40像素;
行高:32像素;
填充:4 px;
padding-right: 0;
box-sizing: border-box;
显示:-webkit-flex;
显示:-moz-flex;
显示:-ms-flex;
显示:-o-flex;
显示:flex;
-ms-align-items:中心;
对齐项目:中心;
justify-content:之间的空间;
border-top: 1 px固体# eee;
}
.input {
vertical-align:最高;
高度:32像素;
行高:32像素;
大纲:没有;
边界:1 px固体# ccc;
填充:0 4 px;
box-sizing: border-box;
flex: 1;
background - color: # eee;
border - radius: 4 px;
margin-right: 10 px;
margin-left: 4 px;
}
.input:专注{
边界:1 px固体# ccc;
}
.send {
宽度:80 px;
text-align:中心;
高度:32像素;
行高:32像素;
光标:指针;
背景颜色:绿色;
颜色:# fff;
margin-right: 10 px;
字体大小:14 px;
}
{.send:活跃
透明度:0.6;
}
李{
list-style:没有;
填充:6 px 10 px;
box-sizing: border-box;
}
.my-say {
text-align:正确;
}
请问{
显示:inline-block;
background - color: # fff;
字体大小:12 px;
填充:6 px 4 px;
border - radius: 4 px;
margin-top: 1 px;
vertical-align:最高;
max-width: 220 px;
}
.computer-say .sayman {
background - color: # 40 e0d0;
}
.my-say .sayman {
background - color: # FFA500;
}
.my-say请问{
text-align:左;
}
.sayman {
字体大小:10 px;
显示:inline-block;
高度:30 px;
宽度:30 px;
background - color: # ccc;
这个特性:50%;
text-align:中心;
行高:30 px;
溢出:隐藏;
文本溢出:省略;
空白:nowrap;}
填充:0 4 px;
box-sizing: border-box;
保证金:0 4 px;
颜色:# fff;
}
.view {
位置:绝对的;
上图:40像素;
底部:40像素;
左:0;
宽度:100%;
填充:10 px 0;
box-sizing: border-box;
overflow-y:汽车;
}
