时时当勉励，岁月不待人。珍惜时间伐~

先看看项目运行的效果



这个是在本地环境打开了两个8080端口进行模拟运行的。

先放下作者的开源地址：https://github.com/ceshu/ceshuChat

这个项目要首先运行服务端，服务端是基于node.js的socket.io，大多数实时聊天系统通常基于 socket 来构建的。

服务器端的代码为

package.json中只有socket.io一个插件

{

  "dependencies": {

    "socket.io": "^1.7.1"

  }

}

在index.js引入socket.io连接客户端

代码为

//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+socket实现消息推送,后台已设定好socket消息，首先在vue项目中引入socket。在npm下载socket。

npm install vue-socket.io

客户端的index.html中引入socket.io.js

<!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，以及Framework7Vue

//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入口文件

<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效果

这个效果的实现还挺有意思的。

【daydayup】ceshuChat的更多相关文章

  1. 【daydayup】weTalk

    先看一下项目效果 这个是我运行的作者的项目的wetalk-server项目,他还有wetalk-client 项目 先放下作者的github项目地址:https://github.com/mangyu ...

  2. Python高手之路【六】python基础之字符串格式化

    Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存.[PEP-3101] This ...

  3. 【原】谈谈对Objective-C中代理模式的误解

    [原]谈谈对Objective-C中代理模式的误解 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 这篇文章主要是对代理模式和委托模式进行了对比,个人认为Objective ...

  4. 【原】FMDB源码阅读（三）

    [原]FMDB源码阅读(三) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 FMDB比较优秀的地方就在于对多线程的处理.所以这一篇主要是研究FMDB的多线程处理的实现.而 ...

  5. 【原】Android热更新开源项目Tinker源码解析系列之一：Dex热更新

    [原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...

  6. 【调侃】IOC前世今生

    前些天,参与了公司内部小组的一次技术交流,主要是针对<IOC与AOP>,本着学而时习之的态度及积极分享的精神,我就结合一个小故事来初浅地剖析一下我眼中的“IOC前世今生”,以方便初学者能更 ...

  7. Python高手之路【三】python基础之函数

    基本数据类型补充: set 是一个无序且不重复的元素集合 class set(object): """ set() -> new empty set object ...

  8. Python高手之路【一】初识python

    Python简介 1:Python的创始人 Python (英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种解释型.面向对象.动态数据类型的高级程序设计语言,由荷兰人Guido ...

  9. 【开源】简单4步搞定QQ登录，无需什么代码功底【无语言界限】

    说17号发超简单的教程就17号,qq核审通过后就封装了这个,现在放出来~~ 这个是我封装的一个开源项目:https://github.com/dunitian/LoTQQLogin ————————— ...

随机推荐

  1. NX二次开发-删除功能区工具栏UF_UI_remove_ribbon

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  2. 深入理解 js为什么没有函数重载，如何实现函数重载？

    我的新博客 http://www.suanliutudousi.com/2017/08/24/%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3-js%E4%B8%BA%E4%B ...

  3. JVM 与 Linux 的内存关系详解

    来源:美团技术团队 在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m. ...

  4. java异常继承何类，运行时异常与一般异常的区别

    一.基本概念 Throwable是所有异常的根,java.lang.ThrowableError是错误,java.lang.ErrorException是异常,java.lang.Exception ...

  5. 01->OpenGL 实验环境配置（glut）及简单实例

    --  简介  -- OpenGL是通过数学等理论知识定义3D或2D模型,由计算机通过流水线渲染技术进行渲染,产生逼真的场景图像,电影和游戏中的特效都有用到.每每看到精美的画面,真想自己也能做出如此作 ...

  6. shell 脚本 功能性语句 read，expr，test

    1. read 从终端输入数据赋值给变量 read val 把读入的数据存放到val中 #!/bin/bash echo -n "please input two number :" ...

  7. Leetcode241.Different Ways to Add Parentheses为运算表达式设计优先级

    给定一个含有数字和运算符的字符串,为表达式添加括号,改变其运算优先级以求出不同的结果.你需要给出所有可能的组合的结果.有效的运算符号包含 +, - 以及 * . 示例 1: 输入: "2-1 ...

  8. QT之发布

    https://blog.csdn.net/qq_40194498/article/details/79926054打开windows控制台直接输入 windeployqt --help 可以知道想要 ...

  9. stelller插件与background-attachment配合使用，制作滚动页面

    stelller插件与background-attachment:fixed配合使用,制作滚动页面

  10. （依赖注入框架：Ninject ） 一 手写依赖注入

    什么是依赖注入? 这里有一个场景:战士拿着刀去战斗: 刀: class Sword { public void Hit(string target) { Console.WriteLine($&quo ...