前言

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

• 纯前端（Vuex）
• 后端+前端（JavaScript）
• 后端+前端（TypeScript）

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

本项目地址：欢迎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）

Server端常用API：

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

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

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

Client端常用API：

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

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

TypeScript教程

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

webpack+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

{  "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的组合，可以一键部署虚拟主机

部署的遇到的坑

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; }

如何使用

预览地址：

Github地址：

开启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

浏览器访问 :8989

如遇在线列表不同步，刷新重进即可

预览

参考资料