【daydayup】ceshuChat

時間 2019-11-17

標籤 daydayup ceshuchat 简体版

原文原文鏈接

時時當勉勵，歲月不待人。珍惜時間伐~
先看看項目運行的效果

這個是在本地環境打開了兩個8080端口進行模擬運行的。
先放下做者的開源地址：https://github.com/ceshu/ceshuChat
這個項目要首先運行服務端，服務端是基於node.js的socket.io，大多數實時聊天系統一般基於 socket 來構建的。
服務器端的代碼爲
package.json中只有socket.io一個插件css

{
  "dependencies": {
    "socket.io": "^1.7.1"
  }
}

在index.js引入socket.io鏈接客戶端
代碼爲html

//app.js
var io = require('socket.io').listen(3000)
io.on('connection', function (socket) {
    console.log("客戶端鏈接成功!")
    socket.on('send', function (data) {
        socket.broadcast.emit('receive', { "user": socket.id, "data": data })
    })
})

接下來咱們來看客戶端的代碼vue

在vue+socket實現消息推送,後臺已設定好socket消息，首先在vue項目中引入socket。在npm下載socket。node

npm install vue-socket.io

客戶端的index.html中引入socket.io.jsios

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title>ceshuChat客戶端</title>
    </head>
    <script src="http://localhost:3000/socket.io/socket.io.js"></script>

    <body>
        <div id="app"></div>
    </body>

</html>

接下來看main.js的代碼
main.js在入口中都引入了socket，以及Framework7Vuegit

//main.js
import Vue from 'vue'
import VueSocketio from 'vue-socket.io'
import Framework7 from 'framework7'
import Framework7Vue from 'framework7-vue'
import Framework7Theme from 'framework7/dist/css/framework7.ios.min.css'
import Framework7ThemeColors from 'framework7/dist/css/framework7.ios.colors.min.css'
import AppStyles from './css/app.css'
import Routes from './routes.js'
import App from './app'
Vue.use(VueSocketio, 'http://localhost:3000')
Vue.use(Framework7Vue)

new Vue({
  el: '#app',
  template: '<app/>',
  framework7: {
    root: '#app',
    routes: Routes,
  },
  components: {
    app: App
  }
});

看App.vue入口文件github

<template>
    <div id="app">
        <f7-statusbar></f7-statusbar>
        <f7-views>
            <f7-view id="main-view" navbar-through :dynamic-navbar="true" main>
                <f7-navbar v-if="$theme.ios">
                    <f7-nav-center sliding>ceshuChat客戶端</f7-nav-center>
                    </f7-nav-right>
                </f7-navbar>
                <f7-pages>
                    <f7-page>

                        <f7-messages>
                            <f7-message v-for="message in messages" :text="message.text" :date="message.date" :name="message.name" :avatar="message.avatar" :type="message.type" :day="message.day" :time="message.time">
                            </f7-message>
                        </f7-messages>
                        <f7-messagebar placeholder="請輸入..." send-link="發送" @submit="onSubmit"></f7-messagebar>

                    </f7-page>
                </f7-pages>
            </f7-view>
        </f7-views>

    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                messages: []
            }
        },
        sockets: {
            connect: function() {},
            customEmit: function(val) {}
        },
        created() {
            this.$options.sockets.receive = (content) => {
                this.messages.push({
                    name: content.user,
                    avatar:content.data.avatar,
                    text: content.data.text,
                    date: content.data.sendDate,
                    type: 'received',
                })
            }
        },
        methods: {
            onSubmit: function(text, clear) {
                if(text.trim().length === 0) return
                let sendDate = (function() {
                    let now = new Date();
                    let hours = now.getHours();
                    let minutes = now.getMinutes()
                    let seconds = now.getSeconds();
                    return hours + ':' + minutes + ':' + seconds
                })()
                let avatar = require('./img/avatar.png')
                let sendEmit = {
                    "text": text,
                    "avatar": avatar,
                    "sendDate": sendDate,
                }
                this.$socket.emit('send', sendEmit)
                this.messages.push({
                    avatar: avatar,
                    text: text,
                    date: sendDate
                })
                clear()
            }
        }
    }
</script>
<style>

</style>

先UI效果
web

這個效果的實現還挺有意思的。npm

相關標籤/搜索

daydayup

ceshuchat

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。