前言
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-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文件中添加
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
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 入门教程