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

skinner 發布于2019-08-21 17:19 / 993人閱讀

摘要：前言這個輪子已經有很多人造過了，為了不重復造輪子，我將本項目以三階段實現大家可以在中的查看純前端后端前端后端前端希望能給大家一個漸進學習的經驗。

前言

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）


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官方手冊

GPU云服務器云服務器教你用教你用阿里云開我的世界服務器 typescript javascript 超詳細教你搭建云免服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89386.html

手把手教你用typescript+nodejs+mongoDB+vue2+angular4仿簡書

摘要：前端的所使用的技術棧后端這個小項目才開始，使用已經搭建好了前端開發環境及相應的的配置。接下來我會帶著大家一起完成整個簡書的開發工作。這是一個開源的個人項目。前端的所使用的技術棧: typescriptes6vue2vue-cliwebpack2axiosangular4angular-cli 后端: nodejsmongoDBejs 這個小項目才開始，使用vue-cli已經搭建好了...

liuchengxu 2019-08-19 18:22 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

20171112 2019-08-29 15:12 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫。現在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

FullStackDeveloper 2019-08-22 16:48 評論0 收藏0
前端之從零開始系列

摘要：只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中項目地址求求求源碼系列跟一起學如何寫函數庫中高級前端面試手寫代碼無敵秘籍如何用不到行代碼寫一款屬于自己的類庫原理講解實現一個對象遵循規范實戰手摸手，帶你用擼 Do it yourself!!! 只有動手，你才能真的理解作者的構思的巧妙只有動手，你才能真正掌握一門技術持續更新中…… 項目地址 https...

Youngdze 2019-08-26 10:57 評論0 收藏0