教你用Vue漸進式搭建聊天室，從JavaScript=>TypeScript

前言

Vue+Socket.io這個輪子已經有很多人造過了，為了不重複造輪子，我將本專案以三階段實現（大家可以在github中的Releases檢視）：

• 純前端（Vuex）
• 後端+前端（JavaScript）
• 後端+前端（TypeScript）

希望能給大家一個漸進學習的經驗。
本專案地址：https://github.com/spiritree/…
歡迎Star&Fork

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檔案中新增

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

部署到伺服器

Linux+Nginx的組合，可以一鍵部署虛擬主機
OneinStack

部署的遇到的坑
https://github.com/socketio/s…

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/…

開啟JavaScript服務端

git clone https://github.com/spiritree/vue-socket.io-chat.git

npm install

npm run server

開啟TypeScript服務端

npm install

cd server

gulp build

npm run tsserver

瀏覽器訪問 http://localhost:8989
如遇線上列表不同步，重新整理重進即可

預覽

參考資料

• TypeScript 入門教程
• Vue + TypeScript 嚐鮮體驗
• TypeScript官方手冊