vue-cli websocket完成聊天窗口实时通讯

本章节主要使用于新手了解vue,快速的用vue-cli进行搭建项目,实例涉及以下部分内容。学习就是日积月累的过程，做好笔记，每一天都在进步，给自己加油。

content.png

nodejs环境安装
官网地址:https://nodejs.org/en/
安装好nodejs后，自动安装好了npm包管理工具

利用vue-cli来初始化我们的项目

//全局安装webpack
npm install -g webpack

//安装vue-cli
npm install -g vue-cli

//使用vue-cli初始化项目
vue init webpack my-project

//进入到目录
cd my-project

//安装依赖
npm install

//运行
npm run dev

vue-cli#2.0 webpack 配置分析

vue-cli目录结构:

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

页面入口文件App.vue

新建header.vue

新建footer.vue

使用vue-awesome-swiper导航切换
vue-aswsome-swiper github地址：https://github.com/surmon-china/vue-awesome-swiper

html5原生websocket

var url = "ws:nio.smartlifein.com:80";
//建立websocket连接
var io = new WebSocket(url);
io.onopen = function(){
  console.log("连接成功");
};
//连接错误
io.onerror = function(e){
  console.log(e);
};
//推送消息
io.onmessage = function(data){
  console.log(data);
};
//关闭连接
io.onclose = function(){
}