教你用Vue渐进式搭建聊天室,从JavaScript=TypeScript
前言
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官方手册
教你用Vue渐进式搭建聊天室,从JavaScript=TypeScript相关推荐
- Springboot+Vue实现在线聊天室项目-修改头像、添加好友接口的实现
Springboot+Vue实现在线聊天室项目 该聊天室为大二上学期计算机网络大作业,并且是本人第一次使用vue实现前后端分离的项目,前端架构尚未熟悉可能会出现一些不妥之处,还请大佬们指出.(本文章写 ...
- 【教程】腾讯云轻量应用服务器搭建聊天室
前言 前些日子听朋友说,他们领的腾讯云轻量246还在吃灰,我在萌备聊天室里看见了这个系统 感觉挺不错 那这篇文章就教大家用宝塔来搭建一个聊天室 介绍 Fiora系统非常简洁,而且也有很多功能,基于 n ...
- 使用nodejs搭建聊天室
搭建一个服务器 //引入fs var fs = require('fs') //引入http var http = require('http') var date = new Date() /*** ...
- vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版
一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室- ...
- vue仿QQ聊天室|vue聊天实例,直播聊天室
图片压缩 百亿站点 基于vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop等技术开发的仿微信聊天界面|仿微信聊天室vue-chatRoom,实现了微信聊天 ...
- MySQL和php搭建聊天室,用PHP MySQL搭建聊天室
MySQL并发能力强.响应速度快,是性能优异的数据库软件:PHP是功能强大的服务器端脚本语言.笔者在山西铝厂网站开发中,采用PHP4.0 MySQL3.23.38建立了多种应用.下面,以一个简单的聊天 ...
- socket.io搭建聊天室
文章目录 1.定义 2.特点 3.实例 1.定义 socket.io是一个可以在客户端和服务器之间实现 低延迟, 双向 和 基于事件的 通信的库.它建立在websocket之上,且当浏览器不支持web ...
- php即时聊天数据库设计入门经典教程_用PHP+MySQL搭建聊天室
MySQL并发能力强.响应速度快,是性能优异的数据库软件:PHP是功能强大的服务器端脚本语言.笔者在山西铝厂网站开发中,采用 PHP4.0+MySQL3.23.38建立了多种应用.下面,以一个简单的聊 ...
- php3.2搭建临时聊天系统,基于swoole搭建聊天室程序
1. 创建websocket服务器 swoole从1.7.9版本开始, 内置了websocket服务器功能,我们只需几行简单的PHP代码,就可以创建出一个异步非阻塞多进程的WebSocket服务器. ...
最新文章
- 近期必读的6篇NeurIPS 2019零样本学习论文
- acl中in和out的区别
- Mongodb 基本操作
- 在 Django 中使用 pyecharts
- centos 6.5升级openssl
- php7.2 加载pgsql驱动,PHP启动:无法加载动态库PGSQL - php
- 远程对象工厂设计模式
- mysql停止更新时间_我如何更新这个MySQL查询以获取从开始、停止、暂停和恢复事件经过的总时间...
- 【深度学习基础】张量的描述与深度学习常见张量
- linux大一实验报告,linux实验报告
- “strcmp”不能将参数从“LPWSTR”转换为“const char *”
- 双非考研上岸中国传媒大学通信(电子信息)的一路历程(考研经验帖)
- 前端播放m3u8格式视频
- 什么是带内管理 带外管理?
- 百度二年级手工机器人_小学二年级手工科技制作方案
- 【从零学习OpenCV 4】Windows系统中安装OpenCV 4
- OpenGL ES glut glew glfw glad freeglut
- 依锥彻怕燎方跃涣牧叵邻牟辟岗俅
- 计算机二级(五)小笨鸟学飞版
- 设计一个jsp页面,要求在网页上显示当前日期和时间,如果时间在6:00~12:00,输出“上午好”:如果时间在12:00 18:00, 输出“下午好”: