vue.js+socket.io打造一个好玩的消息社区

2019年8月25日 313次阅读 来源: keephhh

title: Socket.io+vue打造消息社区
date: 2017-06-12 20:19:05

tags: [vue.js,javascript,socket.io]

vue2.0 + socket.io打造一个DIY消息社区（web初版）

进修vue快有一个多月了，想着着手做一个DIY项目，就挑选了做一个消息方面的社区，许多不足的处所，愿望人人
包涵，然则关于初学的小伙伴来讲，置信照样能够协助到人人，毕竟我只是一个爱分享的小学渣。
### 结果预览

演示地点

源码地点

### 项目形貌
《vue.js+socket.io打造一个好玩的消息社区》
《vue.js+socket.io打造一个好玩的消息社区》
《vue.js+socket.io打造一个好玩的消息社区》
前端部份

  • SPA单页应用，前后端的星散， webpack build to dist

  • 挪动装备兼容：应用flexible.js和rem处置惩罚兼容题目

  • axios做ajax要求

  • 应用了 Vuex 治理组件间的状况，完成非父子组件之间的通讯

  • canvas完成了一个页面加载的时候动画

后端部份

  • 直接搭建在本身的服务器上，API数据是聚合上的数据

  • express 做静态资本目次

  • 启用了socket.io完成一个浅易的谈天窗口

待更新的功用

  • 用户登录功用，如今珍藏只能保留在localstore内里

  • 用 express + mongodb 保留用户状况

  • 用户的批评功用

详细功用的完成

应用了Vue组件化开辟的观点，将端后端星散开，款式一致放在一个零丁的文件夹，轻易治理的复用，应用vuex
一致做一个资本治理，当各个组件须要数据时就向vuex堆栈要求，极大的轻易了治理，模块化越发的清楚清楚明了。

const store = new Vuex.Store({
  state: {
    // url: [require('../../pic/home_1.png') , require('../../pic/home_2.png')],
    Title: '云消息',
    newslist: [],
    url: [require('./pic/like_1.png') , require('./pic/like_2.png')],
    isShowAsideMenu: false,
    isShowAbout: false,
    ischangeC: false,
    tab: 'top',
    Tab: 'guoji',
    title: '云消息',
    showmenu: true,
    showback: false,
    msg: true,
    ismore: false,
    hid: true,
    hod: false,
    hmd: false,
    bgColor: '',
    like: 0,
    status: '珍藏',
    v1: true,
    isshowf: true,
    isLoading: false,
    isShare: false,
    isCollection: false
  },

vuex的应用

  • 须要注重的处所：Action提交的是mution，而不是直接的状况变动

  • Action 能够包括恣意异步操纵。

socket.io的应用

应用socket完成了简朴的谈天功用，在同一个服务器下。看看消息的同时还能够互相讨论一下,这是在后端要求，固然你
得事前装置一下socket了 npm install socket.io --save

var server = http.createServer(app)
var io = require('socket.io')(server)

io.on('connection', function(socket) {
  console.log('启动了Socket.io');
  socket.on('sendGroupMsg', function(value){
    this.broadcast.emit('receiveGroupMsg', value);
  })
  // socket.broadcast.emit('user connected');
})

前端再应用

  socket.emit('sendGroupMsg', this.value.trim());

  socket.on('receiveGroupMsg',() => {
    ...
  })

前期我碰到的题目(分享一下)

  • API存在跨域题目啊，新手一定有如许的迷惑，这可怎样决解？

碰到这个一定是要如今本身的背景对这个数据举行处置惩罚一下吗，不然你本身的前端基础接见不了谁人接口，相
当于本身做一下转接。着实也挺轻易的
(后端处置惩罚接口)

apiRoutes.get('/news/:type', (req, res) => {
  let type = req.params.type;
  function search(tab) {
    return new Promise((resolve, reject) => {
      let searchResult = '';
      url = 'http://v.juhe.cn/toutiao/index?type='+ tab +'........';
      http.get(url, response => {
        response.on('data', data => {
          searchResult += data;
        });
        response.on('end', () => {
          resolve(searchResult)
        })
      })
    })
  }
  search(type)
    .then(searchResult => {
      res.json(JSON.parse(searchResult))
    })
});

app.use('/api', apiRoutes);

(前端要求自定义路由)

this.axios.get('/api/news/' + type)
    .then(data => {
          // console.log(data);

          if(data.status) {
            this.$store.commit('changeTab', {news: data.data.result.data, type: type, isloading: false})
            this.$store.commit('details', {data: this.$store.state.Title, fa: true, fb: false, fc: true,})
          }
      })

刚学的小伙伴们是否是霎时以为照样本身能够处置惩罚的呢，着实不可你就把我的项目拷到本身的目次下装置运转一
下，再研究一下。然则一个很难熬痛苦的事就是我要求的API放在本身的网站服务器上，因为我的域名是https的，API
内里的文章概况的地点是http，还没备案，存在打不开的缺点， 然则你们本身拷贝到本身的电脑下一般装置依靠
运转照样没题目的了，请谅解，不是不能够接见哦。

装置并运转

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
    原文作者：keephhh
    原文地址: https://segmentfault.com/a/1190000009813474
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞