💬 TypeScript + Vue + Express/Koa + Socket.io
Switch branches/tags
Nothing to show
Clone or download
Latest commit 93b5975 Apr 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
config update port:8989 Sep 19, 2017
server refactor: express=>koa2 Nov 16, 2017
src refactor: server->typescript Oct 29, 2017
static
.babelrc import Vuex Sep 13, 2017
.editorconfig
.gitattributes refactor: typescript based Oct 24, 2017
.gitignore
.travis.yml
LICENSE update README Oct 30, 2017
README-en.md add English Document Nov 1, 2017
README.md update: README Apr 4, 2018
index-prod.html refactor: typescript based Oct 24, 2017
index.html refactor: server->typescript Oct 29, 2017
package-lock.json refactor: express=>koa2 Nov 16, 2017
package.json dependency: add express Apr 4, 2018
socket.io.d.ts refactor: server->typescript Oct 29, 2017
tsconfig.json refactor: server->typescript Oct 29, 2017

README.md

教你用Vue渐进式搭建聊天室,从JavaScript=>TypeScript

Build Status GitHub license

English Document

前言

Vue+Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看):

  • 纯前端(Vuex)
  • 后端+前端(JavaScript)
  • 后端+前端(TypeScript)

希望能给大家一个渐进学习的经验。

预览地址:https://app.spiritree.me/

技术栈

Vue + Webpack + TypeScript + Express + SCSS + Socket.io + Gulp

Vue-cli创建工程
`npm install -g vue-cli`

vue init webpack my-project

vue init ElemeFE/webpack-typescript my-project(感谢饿了么分享的TypeScript的模板)

这样就在当前目录下创建了完整的工程模板


Socket.io
在Server端(Express)
import * as socketIo from 'socket.io'

this.io.on('connection', (socket: any) => {
  socket.on('sendMessage', (data: any) => {
    this.io.emit('boardcastMessage', data)
})

在Client端(Vue)

<script lang="ts">
/// <reference path="../../socket.io.d.ts" />
export default Vue.extend({
  mounted() {
    socket.on('boardcastMessage', (data: any) => {
        this.$store.dispatch('sendMessage', { data })
    })
  }
})

Server端常用API:

socket.emit():向建立该连接的客户端发送消息

socket.on():监听客户端发送信息

io.sockets.emit():向所有客户端广播

Client端常用API:

socket.emit():向服务端发送消息

socket.on():监听服务端发来的信息


TypeScript

关于TypeScript的基本知识,可以直接看xcatliu整理的教程,简单易懂,有Java/C#基础就可快速上手。 TypeScript 入门教程

webpack+TypeScript(前端)

Vue + TypeScript 尝鲜体验

也可用官方插件vue-class-component

本项目参考 vue init ElemeFE/webpack-typescript my-project

先添加声明文件(Vue全家桶自带就不需要了) 本项目用到Express和Socket.io

npm install typescript --save-dev

npm i ts-loader --save-dev

在webpack.base.conf.js中添加

{
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
          appendTsSuffixTo: [/\.vue$/],
        }
      },
    ],
  }
}

在根目录添加声明文件

socket.io.d.ts(为了编译通过)

declare namespace socket {
  var on: any;
  var emit: any;
  var data: any;
}

在每个Vue文件中添加

vuechat2.png


Gulp+TypeScript(后端)

npm install gulp --save-dev

npm install gulp-typescript --save-dev

npm install @types/express --save-dev

npm install @types/socket.io --save-dev

Server文件夹结构

├── app.js
├── gulpfile.js
├── register.js
├── src
│   ├── type-app.ts
│   └── type-register.ts
├── tsconfig.json
├── type-app.js
└── type-register.js

添加tsconfig.json

TypeScript官方手册

{
  "include": [
    "src/*.ts"
  ],
  "compilerOptions": {
    "noImplicitAny": true,
    "lib": ["es6"],
    "target": "es5",
    "outDir": ""
  }
}

配置gulpfile.js

var gulp = require("gulp");
var ts = require("gulp-typescript");
var tsProject = ts.createProject("tsconfig.json");

gulp.task("build", function () {
    return tsProject.src()
        .pipe(tsProject())
        .js.pipe(gulp.dest(""));
});

从JavaScript=>TypeScript

vuechat3.png


�部署

Linux+Nginx的组合,可以一键部署虚拟主机 OneinStack

部署的遇到的坑 https://github.com/socketio/socket.io/issues/1942

Error during WebSocket handshake: Unexpected response code: 400

在nginx.conf添加

location / {
	proxy_pass http://localhost:8989;
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_set_header Host $host;
 }

如何使用

预览地址:https://app.spiritree.me/

Github地址:https://github.com/spiritree/vue-socket.io-chat

开启JavaScript服务端

# 从Github克隆本项目
`git clone https://github.com/spiritree/vue-socket.io-chat.git`

# 安装依赖
`npm install`

# 开启本地服务器
`npm run server`

开启TypeScript服务器

# 从Github克隆本项目
`git clone https://github.com/spiritree/vue-socket.io-chat.git`

# 安装依赖
`npm install`

# 切换目录
`cd server`

# 将TypeScript编译成JavaScript
`gulp build`

# 开启本地服务器
`npm run tsserver`

浏览器访问 http://localhost:8989 如遇在线列表不同步,刷新重进即可

预览

vuechat0.png vuechat1.png

参考资料

LICENSE

MIT

Copyright (c) 2017-present, spiritree