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

<template>
  <div id="app">
    ![](./assets/logo.png)
    <hello></hello>
  </div>
</template>

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

新建header.vue

<template>
    <header>
        <div class="active">互动区</div>
        <div>列表</div>
        <div>简介</div>
    </header>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        components: {
        }
    }
</script>

<style scoped>
    header{display: flex;height: .48rem;line-height: .48rem;border-bottom: .01rem solid #eee;position: absolute;top: 0;left: 0;z-index: 1;width: 100%;background: #c60000;color: #fff;}
    header div{flex: 2;display: block;width: 100%;font-weight: bold;}
    header div.active{font-size: .2rem}
</style>

新建footer.vue

<template>
    <footer>
        <input type="text">
        <span>发送</span>
    </footer>
</template>

<script>
    export default {
        data () {
            return {
            }
        },
        components: {
        }
    }
</script>

<style scoped="">
    footer{position: absolute;bottom: 0;left: 0;width: 100%;z-index: 1;background: #eaeaea;text-align: left;padding: 0 .1rem;padding: .08rem .8rem .08rem .1rem;}
    footer span{background: #c60000;color: #fff;height: .32rem;line-height: .32rem;display: block;width: .6rem;border-radius: .04rem;text-align: center;position: absolute;right: .1rem;top: .08rem;}
    footer input{height: .32rem;border: .01rem solid #acacac;border-radius: .04rem;padding: 0 .1rem;width:100%;}
</style>

使用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(){
}