文档章节

一个chat-room练习总结

 年久失修
发布于 2017/04/24 10:37
字数 1308
阅读 82
收藏 0
点赞 0
评论 0

主要参考:廖雪峰的JS全栈教程

练习项目归档:chat-room(Github)

1 整体架构

前端

  • 呈现在Web页面上,提供用户列表,展示、发送聊天面板。
  • 登录、注册面板。
  • 在收到服务器消息后局部更新页面内容。

后端:

  • 服务器收到用户登录信息,刷新数据库状态,并将所有用户列表发送给当前登录用户,并广播该用户信息到其它用户。
  • 服务器收到用户发送的消息,广播给所有用户。

2 知识点

2.1 Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

基本用法:

var http = require('http');

http.createServer(function(request, response) {
  var headers = request.headers;
  var method = request.method;
  var url = request.url;
  var body = [];
  request.on('error', function(err) {
    console.error(err);
  }).on('data', function(chunk) {
    body.push(chunk);
  }).on('end', function() {
    body = Buffer.concat(body).toString();
    // At this point, we have the headers, method, url and body, and can now
    // do whatever we need to in order to respond to this request.
  });
}).listen(8080); // Activates this server, listening on port 8080.

但是这种原生的写起来比较繁重,所以可以考虑一些成熟的开发框架,比如Koa。

2.2. Koa

koa 是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。使用 koa 编写 web 应用,通过组合不同的 generator,可以免除重复繁琐的回调函数嵌套,并极大地提升错误处理的效率。koa 不在内核方法中绑定任何中间件,它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手。

2.2.1 基本用法:

onst Koa = require('koa');
const app = new Koa();

// x-response-time
app.use(async function (ctx, next) {
  const start = new Date();
  await next();
  // next会暂停此函数的运行,将控制权交给一下个函数比如这里的logger(),(如果下个函数里没有再次出发next)然后继续从这里执行,await的意思是等待直到返回。
  const ms = new Date() - start;
  ctx.set('X-Response-Time', `${ms}ms`);
});

// logger
app.use(async function (ctx, next) {
  const start = new Date();
  await next();
  const ms = new Date() - start;
  console.log(`${ctx.method} ${ctx.url} - ${ms}`);
});

// error handle
app.on('error', (err, ctx) =>
  log.error('server error', err, ctx)
);

// response
app.use(ctx => {
  ctx.body = 'Hello World';
});

app.listen(3000); // i.e. http.createServer(app.callback()).listen(3000);

2.2.2 常用方法

  • ctx.req / ctx.res node的request/response。Koa的request和response分别为ctx.request、ctx.response,而Koa中可以简写,如ctx.header就是ctx.request.header
  • ctx.state 向前端传递数据。 ctx.state.user = await User.find(id);

2.2.3 中间件

app.use(function) 常用的如koa-bodyparser、koa-rooter等,了解更多Koa Middleware

2.3 Nunjucks

它是一种更偏向于后端的模板引擎(比如输出网页),但是不比那些如React.js、Vue.js等前端框架在更前端的表现能力。 基本用法:

const nunjucks = require('nunjucks');
var res = nunjucks.render('foo.html', { username: 'James' });

nunjucks.render('async.html', function(err, res) {
});

官方手册Nunjucks

2.4 Sequelize

一个基于Promise机制的ORM。

var Sequelize = require('sequelize');
var sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'|'mariadb'|'sqlite'|'postgres'|'mssql',

  pool: {
    max: 5,
    min: 0,
    idle: 10000
  },

  // SQLite only
  storage: 'path/to/database.sqlite'
});

var User = sequelize.define('user', {
  username: Sequelize.STRING,
  birthday: Sequelize.DATE
});

sequelize.sync().then(function() {
  return User.create({
    username: 'janedoe',
    birthday: new Date(1980, 6, 20)
  });
}).then(function(jane) {
  console.log(jane.get({
    plain: true
  }));
});

官方手册Sequelize

2.5 Websocket

它只是一个协议,和什么语言没有任何关系。是一种持久化(全双工)通信的协议,与HTTP有交集但不一样。

2.5.1 基本原理

以下内容摘自知乎WebSocket 是什么原理?为什么可以实现持久连接?,版权归原作们所有。 Websocket是基于HTTP协议的,它的前期握手一部分就是HTTP协议握手。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

它比一般的HTTP握手协议中多了

Upgrade: websocket
Connection: Upgrade

服务器响应:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

然后就可以互通有无了。 它主要解决了(当想要全双工通信时)使用HTTP协议中的无状态、被动式的通信方式,减少了每次通信都要重新建立连接从而耗费资源的问题。

ps:引用结束。

2.5.2 ws用法

Node中有实现了Websocket的包,通过npm install ws安装。

// 服务器
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});


// 客户端
const WebSocket = require('ws');

const ws = new WebSocket('ws://www.host.com/path');

ws.on('open', function open() {
  ws.send('something');
});

ws.on('message', function incoming(data, flags) {
  // flags.binary will be set if a binary data is received.
  // flags.masked will be set if the data was masked.
});

Github地址

2.6 Vue.js

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

// HTML
<div id="app">
  {{ message }}
</div>

// js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

注意: Vue.js的{{..}}会和其它模板框架(比如Nunjucks)有冲突,所以当必须要使用两种框架时,可以通过v-text=""来规避。

以上。

© 著作权归作者所有

共有 人打赏支持
粉丝 0
博文 4
码字总数 1978
作品 0
香港
分享自己写的基于React+Redux+Socket.io + Material-UI 开发的简易聊天室

自己写了一个简易的聊天室 主要是用来练习react+redux的写法,蛮适合新手入门学习 简单的运用React + Redux + Socket.io + Material-UI开发一个小型聊天室 地址: https://github.com/Alvin-...

alvin14754 ⋅ 2017/07/09 ⋅ 2

Comet技术在项目中的使用

Comet是一种服务器端推的技术,所谓服务器端推也就是当有事件要通知给某个用户的时候,是由服务器端直接发送到用户的浏览器。 服务器端Push目前一般有两种方式,HTTP streaming和Long pollin...

保罗的寓言 ⋅ 2011/06/16 ⋅ 0

10 个很有用的 WordPress 聊天插件

WordPress 已经稳步成为一个最完善的社会媒体平台。本文介绍一些聊天插件,使用上非常简单和有趣。 10. BumpIn 9. WP Symposium 8. Go Chat 7. Comm100 Live Chat 6. iFlyChat 5. HTML 5 Onl...

oschina ⋅ 2013/05/04 ⋅ 16

优客服开源客服系统通信功能介绍

1.1 优客服功能 1.1.1 优客服功能组成 优客服,是一个多渠道融合的客户支持服务平台,包含WebIM,微信,电话,邮件,短信等接入渠道,在渠道接入方面,优客服主要包含以下几种: WebIM:优客...

优客服多渠道客服系统 ⋅ 2017/05/05 ⋅ 0

Apache OpenMeetings 3.2.0 ,视频会议系统

Apache OpenMeetings 3.2.0 发布了,OpenMeetings 是一个多语言可定制的视频会议和协作系统。它支持音频、视频,能让你查看每个与会者的桌面。OpenMeetings 还包含一个白板,通过白板可以导入...

局长 ⋅ 2017/02/18 ⋅ 0

10 款 jQuery 的网页聊天插件

很多网站都会提供在线上直接跟访客进行交流聊天的功能,这些功能使用简单直接,无需再打开其他应用程序。下面向你推荐 10 个 jQuery 的网页聊天插件。 请点击图片前往插件的页面: 1. jQuer...

oschina ⋅ 2015/04/24 ⋅ 9

Redis 命令参考——PubSub(发布订阅)

PubSub(发布订阅) PUBLISH PUBLISH channel message 将信息 message 发送到指定的频道 channel 。 可用版本: >=2.0.0 时间复杂度: O(N+M),其中 N 是频道 channel 的订阅者数量,而 M 则是...

超人学院 ⋅ 2015/05/28 ⋅ 0

Python 编写的 在线多人多聊天室服务器

使用 asyncore 和 asynchat 模块,实现 多客户端的接入 和 服务器、客户端之间消息的传递。 几个类及各自的功能: EndSession:异常类,用于产生异常退出 CommandHandler:消息分类处理,区分...

铁扇公主1 ⋅ 2017/04/02 ⋅ 0

Jabber 聊天代理--Nagzilla

Nagzilla 设计用来将来自 Jabber 的消息传递到某个聊天室或者是某个人,Nagzilla 以守护进程方式运行,可以接受来自各种系统的消息,并进行消息转发,支持 Google Talk,虽然并未经过测试。 ...

匿名 ⋅ 2009/05/19 ⋅ 0

Apache OpenMeetings 3.3.2 发布,视频会议系统

Apache OpenMeetings 3.2.2 发布了,OpenMeetings 是一个多语言可定制的视频会议和协作系统。它支持音频、视频,能让你查看每个与会者的桌面。OpenMeetings 还包含一个白板,通过白板可以导入...

两味真火 ⋅ 2017/09/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

知乎Java数据结构

作者:匿名用户 链接:https://www.zhihu.com/question/35947829/answer/66113038 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 感觉知乎上嘲讽题主简...

颖伙虫 ⋅ 今天 ⋅ 0

Confluence 6 恢复一个站点有关使用站点导出为备份的说明

推荐使用生产备份策略。我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 home 目录)。XML 导出备...

honeymose ⋅ 今天 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

火狐浏览器各版本下载及插件httprequest

各版本下载地址:http://ftp.mozilla.org/pub/mozilla.org//firefox/releases/ httprequest插件截至57版本可用

xiaoge2016 ⋅ 今天 ⋅ 0

Docker系列教程28-实战:使用Docker Compose运行ELK

原文:http://www.itmuch.com/docker/28-docker-compose-in-action-elk/,转载请说明出处。 ElasticSearch【存储】 Logtash【日志聚合器】 Kibana【界面】 答案: version: '2'services: ...

周立_ITMuch ⋅ 今天 ⋅ 0

使用快嘉sdkg极速搭建接口模拟系统

在具体项目研发过程中,一旦前后端双方约定好接口,前端和app同事就会希望后台同事可以尽快提供可供对接的接口方便调试,而对后台同事来说定好接口还仅是个开始、设计流程,实现业务逻辑,编...

fastjrun ⋅ 今天 ⋅ 0

PXE/KickStart 无人值守安装

导言 作为中小公司的运维,经常会遇到一些机械式的重复工作,例如:有时公司同时上线几十甚至上百台服务器,而且需要我们在短时间内完成系统安装。 常规的办法有什么? 光盘安装系统 ===> 一...

kangvcar ⋅ 昨天 ⋅ 0

使用Puppeteer撸一个爬虫

Puppeteer是什么 puppeteer是谷歌chrome团队官方开发的一个无界面(Headless)chrome工具。Chrome Headless将成为web应用自动化测试的行业标杆。所以我们很有必要来了解一下它。所谓的无头浏...

小草先森 ⋅ 昨天 ⋅ 0

Java Done Right

* 表示难度较大或理论性较强。 ** 表示难度更大或理论性更强。 【Java语言本身】 基础语法,面向对象,顺序编程,并发编程,网络编程,泛型,注解,lambda(Java8),module(Java9),var(...

风华神使 ⋅ 昨天 ⋅ 0

Linux系统日志

linux 系统日志 /var/log/messages /etc/logrotate.conf 日志切割配置文件 https://my.oschina.net/u/2000675/blog/908189 logrotate 使用详解 dmesg 命令 /var/log/dmesg 日志 last命令,调......

Linux学习笔记 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部