前言
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官方手册
