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

skinner 发布于2019-08-21 17:19 / 969人阅读

摘要：前言这个轮子已经有很多人造过了，为了不重复造轮子，我将本项目以三阶段实现大家可以在中的查看纯前端后端前端后端前端希望能给大家一个渐进学习的经验。

前言

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 超详细教你搭建云免服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 理解如何把网页分...

FullStackDeveloper 2019-08-22 16:48 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

20171112 2019-08-29 15:12 评论0 收藏0
前端之从零开始系列

摘要：只有动手，你才能真的理解作者的构思的巧妙只有动手，你才能真正掌握一门技术持续更新中项目地址求求求源码系列跟一起学如何写函数库中高级前端面试手写代码无敌秘籍如何用不到行代码写一款属于自己的类库原理讲解实现一个对象遵循规范实战手摸手，带你用撸 Do it yourself!!! 只有动手，你才能真的理解作者的构思的巧妙只有动手，你才能真正掌握一门技术持续更新中…… 项目地址 https...

Youngdze 2019-08-26 10:57 评论0 收藏0