文档章节

一个chat-room练习总结

 年久失修
发布于 2017/04/24 10:37
字数 1308
阅读 109
收藏 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
286
2
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
6.1K
16
优客服开源客服系统通信功能介绍

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

优客服多渠道客服系统
2017/05/05
197
0
Apache OpenMeetings 3.2.0 ,视频会议系统

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

局长
2017/02/18
1K
0
10 款 jQuery 的网页聊天插件

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

oschina
2015/04/24
29.6K
9

没有更多内容

加载失败,请刷新页面

加载更多

JavaFX WebView概述,很强大,内置了类似Electron的功能

来自 Murali Billa JavaFX技术人员的主要成员 在本博客中,我们将了解JavaFX如何呈现网页及其主要的组件 - 即WebView JavaFX是: 用于创建和交付桌面应用程序的软件平台,以及可以在各种设备...

GuoMengyue
31分钟前
4
0
数据库监控系统小实现1

需求:通过java 去调取python 去目标数据库采集信息,然后插入到数据库,由前台UI显示出来,从而达到监控目的。 设计:通过java的Runtime.getRuntime().exec(args1)方法去调用python脚本,j...

hnairdb
33分钟前
1
0
spring boot logback-spring 配置 日志分文件

因为更规规范化,想将日志分文异常类型,分别存储起来,方便以后查询问题。 以下是 logback-spring.xml 配置: <?xml version="1.0" encoding="UTF-8"?><configuration scan="true"> ...

诺岚
34分钟前
3
0
OSChina 周三乱弹 —— 这下回去要被老婆挠死

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Passenger的单曲《Let Her Go》 《The Importance of Being Idle》-Noel Gallagher/It's a Cover Up 手机党少年们想听歌,请使...

小小编辑
53分钟前
808
19
RedHat已更改其开源许可规则

对于编程圈外的人来说,软件许可证似乎并不重要,但是,在开源领域,开源许可是非常重要的。 因此,领先的Linux公司Red Hat宣布了一件大事,所有新的由Red Hat发起的使用GNU通用公共许可证(...

linuxCool
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部