koa、koa-route、koa-websocket、request。
客户端：
html、css、js、websocket。
远程聊天API：
。
客户端展示
开发步骤
1.在桌面创建bbs文件夹，然后在文件夹内打开cmd,输入：
$ npm init
初始化箱项目，生成package.json包管理文件
2.cmd输入：
$ npm install koa --save
安装koa。
3.cmd输入：
$ npm install koa-route --save
安装koa路由模块。
4.cmd输入：
$ npm install koa-websocket --save
安装koawebsocket模块。
我的package.json：
{ "name": "bbs", "version": "1.0.0", "description": "", "main": "server.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "node server.js" }, "author": "", "license": "ISC", "dependencies": { "koa": "^2.8.1", "koa-route": "^3.2.0", "koa-websocket": "^6.0.0" } }
5.在bbs文件夹中新建server.js,项目启动入口文件。
添加内容如下：
const Koa = require('koa'), route = require('koa-route'), websockify = require('koa-websocket'), http = require('http'), app = websockify(new Koa()); app.ws.use(route.all('https://www.jb51.net/', ctx => { // websocket作为“ctx.websocket”添加到上下文中。 ctx.websocket.on('message', message => { startRequest(message, ctx); }); })); function startRequest(message, ctx) { // 采用http模块向服务器发起一次get请求 http.get(`?key=free&appid=0&msg=${encodeURI(message)}`, res => { // 防止中文乱码 res.setEncoding('utf-8'); // 监听data事件，每次取一块数据 res.on('data', chunk => { ctx.websocket.send(JSON.parse(chunk).content); }); }).on('error', err => { ctx.websocket.send('对不起，网络故障了'); });} // 监听端口、启动程序 app.listen(3000, err => { if (err) throw err; console.log('websocket服务器启动在3000端口'); })
假如对server.js还不清楚的，可以留言或者邮件咨询我。
6.在bbs文件夹中新建index.html文件，作为客户端展示文件。
添加内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实时聊天室</title> <link type="text/css" href="https://www.jb51.net/index.css"> </head> <body> <div> <div>实时聊天室</div> <div> <input placeholder="你想说什么..." type="text" onkeydown="keyEnter()" /> <div>发送</div> </div> <div> <ul></ul> </div> </div> <script src="https://www.jb51.net/index.js"></script> </body> </html>
7.在bbs文件夹中新建index.css,客户端的样式。
内容如下：
* { padding: 0; margin: 0; -webkit-user-select: none; -moz-user-select: none; } html, body { height: 100%; width: 100%; background-color: #333; position: relative; font-size: 12px; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #eee; width: 320px; height: 564px; box-sizing: border-box; } .title { height: 40px; line-height: 40px; text-align: center; background-color: #000; color: #fff; position: relative; font-size: 16px; } .input-box { margin-top: 10px; position: absolute; bottom: 0; background-color: #fff; width: 100%; height: 40px; line-height: 32px; padding: 4px; padding-right: 0; box-sizing: border-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -ms-align-items: center; align-items: center; justify-content: space-between; border-top: 1px solid #eee; } .input { vertical-align: top; height: 32px; line-height: 32px; outline: none; border: 1px solid #ccc; padding: 0 4px; box-sizing: border-box; flex: 1; background-color: #eee; border-radius: 4px; margin-right: 10px; margin-left: 4px; } .input:focus { border: 1px solid #ccc; } .send { width: 80px; text-align: center; height: 32px; line-height: 32px; cursor: pointer; background-color: green; color: #fff; margin-right: 10px; font-size: 14px; } .send:active { opacity: 0.6; } li { list-style: none; padding: 6px 10px; box-sizing: border-box; } .my-say { text-align: right; } .say { display: inline-block; background-color: #fff; font-size: 12px; padding: 6px 4px; border-radius: 4px; margin-top: 1px; vertical-align: top; max-width: 220px; } .computer-say .sayman { background-color: #40E0D0; } .my-say .sayman { background-color: #FFA500; } .my-say .say { text-align: left; } .sayman { font-size: 10px; display: inline-block; height: 30px; width: 30px; background-color: #ccc; border-radius: 50%; text-align: center; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; box-sizing: border-box; margin: 0 4px; color: #fff; } .view { position: absolute; top: 40px; bottom: 40px; left: 0; width: 100%; padding: 10px 0; box-sizing: border-box; overflow-y: auto; }
8.在bbs文件夹中创建index.js文件，作为客户端js处理文件。
内容如下：