技术标签: 聊天系统
用socket io 来完成实时通信。
在控制台中输入以下任意一个命令行。
这里我用的第二种
npm install vue-socket.io --save
npm install socket.io-client --save
安装完成后
创建一个仓库在默认路径下与static同级创建一个store文件夹,文件夹下有index.js。index.js中用于写各种vuex中的逻辑问题
import Vue from 'vue'
import Vuex from 'vuex'
import io from '@hyoga/uni-socket.io';
import conf from '@/common/lib/config.js'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//仓库中的全局变量
isLoad: false,
socket:null,
lineState:false,
clientId:null,//对方
kefuId:null,
target:null,//目标
chatList:[],
msg:null,
action:null,
},
// 计算属性 可以获得参数,第一个是state,第二个是getters(自身) 用户传参(state,getters)=> (id)=>{}
getters: {
getClientId: state => state.clientId,
getKeFuId: state => state.kefuId,
getTarget: state => state.target,
getChatList: state => state.chatList,
getMsg: state => state.msg,
getAction: state => state.action
},
// 动态改变变量值
mutations: {
//示例
setIsLoad(state, isLoad) {
state.isLoad = isLoad
},
},
actions: {
//用于写异步方法
//链接socketIO
connectSocket({
state, dispatch},data) {
// 这里的conf.socketUrl往下有提到 连接后赋值给socket
const socket = io(conf.socketUrl, {
//这里是连接时所携带的数据
query: data,
//连接方式
transports: [ 'websocket' ],
//过期时间
timeout: 5000,
});
//socket监听服务器发送的消息 服务器中一定有emit(‘connect’)。
socket.on('connect', () => {
console.log('ws 已连接');
//将连接成功的socket 赋值给变量 state.socket
state.socket = socket
//连接成功后,将上线状态改为true
state.lineState = true
// socket.io 唯一连接id,可以监控这个id实现点对点通讯
const {
id } = socket;
//将连接的socket 即id 赋值给clientId (房间号)
state.clientId = id
//派发事件
const chatPush = (e) => {
uni.$emit('chatPush', e)
}
//派发没有分配客服的事件, 在index.vue页面引用 用:
const noKefu = () => {
uni.$emit('noKefu')
}
// 监听服务器连接成功后的状态
socket.on(id, (message, fn) => {
//连接成功后,接受服务器返回过来的信息
state.msg = message
const action = message.data.action
//连接成功后 获取返回过来的的action
state.action = action
const data = message.data
console.log('action:',action);
console.log('ws data:', data);
switch (action){
case 'online':
uni.showToast({
title:"连接成功",
icon:'none'
})
state.kefuId = message.data.payload.kefuId
break;
case 'no':
uni.showToast({
title:"没有可分配客服",
icon:'none'
})
//这里调用上面派发的没有客服的方法是true,就关连接
noKefu()
//如果在线状态是
if(state.lineState) {
this.dispatch('closeSocket')
}
break;
case 'noline':
uni.showToast({
title:"对方不在线",
icon:'none'
})
break;
case 'exchange':
//当是exchange类型的消息,就添加消息至消息列表
// 拿到数据传出去
// console.log(123);
chatPush(data)
break;
}
// 收到服务器推送的消息,可以跟进自身业务进行操作
if(typeof fn === 'function') {
fn('ok')
}
});
// 主动向服务器发送数据
// socket.emit('send_data', {
// time: +new Date(),
// });
});
//监听服务器的 在线 方法
socket.on('online', (msg) => {
console.log(msg);
});
//监听服务器的断开连接方法
socket.on('disconnect', () => {
console.log("断开链接");
if(state.lineState) {
this.dispatch('closeSocket')
}
});
//监听服务器出现错误的方法
socket.on('error', (msg) => {
console.log('ws error', msg);
if(state.lineState) {
this.dispatch('closeSocket')
}
});
},
//关闭连接
closeSocket({
state, dispatch}) {
const offChat = ((e) => {
uni.$off('chatPush', e)
})
state.lineState === false
offChat()
if(state.socket !== null) {
state.socket.close()
state.socket = null
state.lineState = false
state.target = ''
}
},
//发送信息
sendMsg({
state, dispatch}, data) {
console.log(data);
state.socket.emit('exchange', data)
}
}
})
在common的config文件中定义socket io链接地址
export default{
//这里是请求接口的地址
baseUrl:"http://wech******ip.com",
//这里是socket io通信地址
socketUrl:"http://we***********m/chat",
env:'dev'
}
这里的common/config.js文件是自己创建的。主要作用是存放请求地址,在common的文件夹下还有一个与config同级的文件request.js是用来写异步请求方法的,文章主题不是它,这里就不赘述了。request中与本文相关的内容就是,在request.js中引入vuex的仓库,用于连接仓库和页面
// 主要看这个地方,在这个文件里引入仓库
import $store from '@/store/index.js'
import $config from '@/common/lib/config.js'
export default {
// 全局配置
common: {
baseUrl: $config.baseUrl,
header: {
'Content-Type': 'application/json;charset=UTF-8',
'Content-Type': 'application/x-www-form-urlencoded',
},
data: {
},
method: 'GET',
dataType: 'json'
},
// 请求 返回promise
request(options = {
}) {
let token = true
options.url = this.common.baseUrl + options.url
options.header = options.header || this.common.header
options.data = options.data || this.common.data
options.method = options.method || this.common.method
options.dataType = options.dataType || this.common.dataType
if(options.token === false) {
token = false
}
//在这里判断token的时候应用$store
if(token) {
if(!$store.state.user.token) {
console.log('没有token');
return uni.reLaunch({
url:'/pages/login/login'
})
}
options.header.Authorization = `Bearer ${
$store.state.user.token}`
}
return new Promise((resolve, reject) => {
// 请求前
// 请求中
uni.request({
...options,
success: (res) => {
// 服务端失败
if(res.statusCode !==200){
uni.showToast({
title:res.data.msg || '服务端请求失败',
icon:'none'
})
return reject()
}
let data = res.data
resolve(data)
},
fail: (err) => {
uni.showToast({
title:err.errMsg || '请求失败',
icon:'none'
})
return reject(err)
}
})
})
},
// get 请求
get(url, data = {
}, options = {
} ){
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
},
// post 请求
post(url, data = {
}, options = {
} ){
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
},
// post 请求
put(url, data = {
}, options = {
} ){
options.url = url
options.data = data
options.method = 'PUT'
return this.request(options)
},
// post 请求
del(url, data = {
}, options = {
} ){
options.url = url
options.data = data
options.method = 'DELETE'
return this.request(options)
}
}
文章浏览阅读451次。dev/mem: 物理内存的全镜像。可以用来访问物理内存。/dev/kmem: kernel看到的虚拟内存的全镜像。可以用来访问kernel的内容。调试嵌入式Linux内核时,可能需要查看某个内核变量的值。/dev/kmem正好提供了访问内核虚拟内存的途径。现在的内核大都默认禁用了/dev/kmem,打开的方法是在 make menuconfig中选中 device drivers --> ..._dev/mem 源码实现
文章浏览阅读7.1k次,点赞2次,收藏19次。vxe-table,一个小众但功能齐全并支持excel操作的vue表格组件_vxe-table
文章浏览阅读62次。参考:http://www.ruanyifeng.com/blog/2016/01/babel.htmlBabelBabel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行// 转码前input.map(item => item + 1);// 转码后input.map(function (item) { return item..._让开发环境支持bable
文章浏览阅读2.8k次,点赞6次,收藏29次。摘要:FPGA视频处理FIFO的典型应用,视频输入FIFO的作用,视频输出FIFO的作用,视频数据跨时钟域FIFO,视频缩放FIFO的作用_fpga 频分复用 视频
文章浏览阅读575次。【代码】R语言:设置工作路径为当前文件存储路径。_r语言设置工作目录到目标文件夹
文章浏览阅读452次。格式:background: linear-gradient(direction, color-stop1, color-stop2, ...);<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner>] ,]? &l..._background线性渐变
文章浏览阅读1k次,点赞26次,收藏8次。第十三届蓝桥杯青少年组python编程省赛真题一、题目要求(注:input()输入函数的括号中不允许添加任何信息)1、编程实现给定一个正整数N,输出正整数N中各数位最大的那个数字。例如:N=132,则输出3。2、输入输出输入描述:只有一行,输入一个正整数N输出描述:只有一行,输出正整数N中各数位最大的那个数字输入样例:
文章浏览阅读2.2k次。一个网络协议主要由以下三个要素组成:1.语法数据与控制信息的结构或格式,包括数据的组织方式、编码方式、信号电平的表示方式等。2.语义即需要发出何种控制信息,完成何种动作,以及做出何种应答,以实现数据交换的协调和差错处理。3.时序即事件实现顺序的详细说明,以实现速率匹配和排序。不完整理解:语法表示长什么样,语义表示能干什么,时序表示排序。转载于:https://blog.51cto.com/98..._网络协议三要素csdn
文章浏览阅读153次。主要的思想,将所有的系统都可以看作两部分,真正的数据log系统和各种各样的query engine所有的一致性由log系统来保证,其他各种query engine不需要考虑一致性,安全性,只需要不停的从log系统来同步数据,如果数据丢失或crash可以从log系统replay来恢复可以看出kafka系统在linkedin中的重要地位,不光是d..._the log: what every software engineer should know about real-time data's uni
文章浏览阅读746次。伟大是熬出来的 目录 前言 引言 时间熬成伟大:领导者要像狼一样坚忍 第一章 内圣外王——领导者的心态修炼 1. 天纵英才的自信心 2. 上天揽月的企图心 3. 誓不回头的决心 4. 宠辱不惊的平常心 5. 换位思考的同理心 6. 激情四射的热心 第二章 日清日高——领导者的高效能修炼 7. 积极主动,想到做到 8. 合理掌控自己的时间和生命 9. 制定目标,马..._当狼拖着受伤的右腿逃生时,右腿会成为前进的阻碍,它会毫不犹豫撕咬断自己的腿, 以
文章浏览阅读285次。在当今的大数据时代,人们对高速度和高带宽的需求越来越大,迫切希望有一种新型产品来作为高性能计算和数据中心的主要传输媒质,所以有源光缆(AOC)在这种环境下诞生了。有源光缆究竟是什么呢?应用在哪些领域,有什么优势呢?易天将为您解答!有源光缆(Active Optical Cables,简称AOC)是两端装有光收发器件的光纤线缆,主要构成部件分为光路和电路两部分。作为一种高性能计..._aoc 光缆
文章浏览阅读2.2k次。在“桌面”上按快捷键“Ctrl+R”,调出“运行”窗口。接着,在“打开”后的输入框中输入“Gpedit.msc”。并按“确定”按钮。如下图 找到“用户配置”下的“Windows设置”下的“Internet Explorer 维护”的“连接”,双击选择“自动浏览器配置”。如下图 选择“自动启动配置”,并在下面的“自动代理URL”中填写相应的PAC文件地址。如下..._設置proxy腳本