当前位置：首页 > 软件库 > Web应用开发 > Web框架 >

vue-socket.io-chat

💬 TypeScript + Vue + Express/Koa + Socket.io

授权协议 MIT License

开发语言 JavaScript

所属分类 Web应用开发、 Web框架

软件类型开源软件

地区不详

投递者濮佑运

操作系统跨平台

开源组织无

适用人群未知

软件概览

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

English Document

前言

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

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

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

预览地址：https://app.spiritree.me/

技术栈

Vue + Webpack + TypeScript + Express + SCSS + Socket.io + Gulp

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/socket.io/issues/1942

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/vue-socket.io-chat

开启JavaScript服务端

# 从Github克隆本项目
`git clone https://github.com/spiritree/vue-socket.io-chat.git`

# 安装依赖
`npm install`

# 开启本地服务器
`npm run server`

开启TypeScript服务器

# 从Github克隆本项目
`git clone https://github.com/spiritree/vue-socket.io-chat.git`

# 安装依赖
`npm install`

# 切换目录
`cd server`

# 将TypeScript编译成JavaScript
`gulp build`

# 开启本地服务器
`npm run tsserver`

浏览器访问 http://localhost:8989如遇在线列表不同步，刷新重进即可

预览

参考资料

LICENSE

MIT

使用案例

Vue框架（使用vue-socket.io-extended实现聊天功能）

因为是配套写的，如果是后端是用egg框架写的话，建议配合我写的另一篇文章观看,不是egg框架也建议去看看。 egg框架（通过egg-socket.io建立即时通讯服务,实现聊天功能） 1.安装插件 npm install socket.io-client npm install vue-socket.io-extended 其实一开始我是用vue-socket.io的，毕竟教程多，但是我装完后
前端vue使用vue-socket.io与socket.io-client与后台使用netty-socketio建立实时通信

因为项目中需要用到socket实现端到端的实时通信对话网上的教程也多是后台使用node，笔者这里项目后台使用的是java，所以只能另辟蹊径话不多说开搞，这里记录一下搞得过程遇到的需要注意的问题 Java 后端 1.在pom.xml添加netty-socketio的jar包  <dependency> <gr
vue-socket.io 和 flask_socketio使用

python 服务端代码需要先安装flask 和 flask_socketio pip install flask pip install flask_socketio # -*- coding: utf-8 -*- from flask import Flask from flask_socketio import SocketIO,send,emit app = Flask(__name__
Vue使用socket.io实现客户端服务器通信

Vue使用socket.io socket.io中文文档 (适合快速上手) 英文官方文档（适合查阅详细）介绍 socke.io 是 Websocket的一个库，支持及时、双向与基于事件的交流。它可以在每个平台、每个浏览器和每个设备上工作，可靠性和速度同样稳定。包括客户端的js和服务器端的node.js。在Vue的客户端部署socket 1.安装插件 npm install vue-socket
超详细--vue3中使用socket.io-client + nodejs使用socket.io 实现实时通信

Vue中第一步：安装插件 // 注意：客户端和服务端版本一定要兼容，尽量一样 // 我的 nodejs 和 vue 中都是 4.5.4 版本 npm i socket.io-client -S 第二步：组件中引入使用 <template> <div> <el-button @click="handleEmit">发送</el-button> </div> </template