vue项目使用websocket做聊天项目总结
一、首先我们先了解一下websocket的使用:
1、创建websocket
const ws = new WebSocket("ws://192.168.31.136:9998/ws");
2、已连接上,使用 send() 方法发送用户信息给后端
ws.onopen = ()=>{
ws.send("发送数据");
}
3、收到消息
ws.onmessage=(evt)=>{
var received_msg = evt.data;
}
4、连接断开
ws.onclose=(evt)=>{
console.log(evt)
}
二、vue项目使用websocket思路.
1、登录成功后连接websocket。
为了防止刷新页面后websocket会断开连接,我们在main.js中添加如下代码。
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { initWebSocket } from "./plugins/socket";
try {
const userInfo = JSON.parse(localStorage.getItem("userInfo"));
if (userInfo) {
store.commit("setUserInfo", userInfo);
initWebSocket();
}
} catch (error) {
console.log(error);
}
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
2、收到消息后保存到vuex state状态中
3、聊天页面监听vuex state数据。
4、push进聊天记录数组。
以下是我简单封装的websocket方法:
import vuex from "../store";
let ws = null;
export function initWebSocket() {
let userInfo = vuex.state.userInfo;
// 创建websocket
ws = new WebSocket("ws://192.168.31.141:5566/ws");
// 连接成功发送用户信息给后端
ws.onopen = function() {
let msg = {
token: userInfo.token,
type: 1,
msgType: 0,
sendUserId: userInfo.id
};
ws.send(JSON.stringify(msg));
};
// 收到消息保存到vuex
ws.onmessage = function(event) {
vuex.commit("setMsg", event.data);
console.log(event);
};
// 断开连接后进行重连
ws.onclose = function(event) {
console.log(event);
let userInfo = vuex.state.userInfo;
if (userInfo) {
setTimeout(() => {
initWebSocket();
}, 5000);
}
};
}
// 发送消息(可以引入使用,也可以挂在到Vue原型上面使用)
export function webSocketSend(data) {
if (ws.readyState === 1) {
ws.send(JSON.stringify(data));
}
}
希望能帮助到大家!
vue项目使用websocket做聊天项目总结的更多相关文章
- 一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP,支持各类消息收发,音视频通话,附vue实现源码(已开源)-项目引言
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
- Netty+MUI从零打造一个仿微信的高性能聊天项目,兼容iPhone/iPad/安卓
要说到微信,我相信是个人都应该知道,几乎人人都会安装这款社交APP吧,它已经成为了我们生活中不可缺少的一份子. 我记得我上大学那会刚接触Java,做的第一个小项目就是基于J2SE的聊天室,使用Java ...
- java版的类似飞秋的局域网在线聊天项目
原文链接:http://www.cnblogs.com/wangleiblog/articles/5323305.html 转载请注明 最近在弄一个java版的局域网在线聊天项目,功能跟飞秋差不多.p ...
- vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线
最近我朋友王小闰他们公司的项目开发已经进入收尾阶段,前后端并行开发的差不多了,联调也调过了,上篇文章里也讲到了,所谓联调,就仿佛在说“我也不知道我的接口文档写的对不对,我们验证一下吧?我也不知道我的数 ...
- 【vue学习】vue 2.0版本以上创建项目的的步骤
一.环境准备 1.vue项目依赖 node.js npm,需要先安装node和npm,先检查本地是否安装node.npm 快捷键win+r 输入cmd 弹出操作框,如果电脑已经安装git,直接右 ...
- 用 Vue 改造 Bootstrap,渐进提升项目框架[转]
GitChat 作者:Meathill 原文:用 Vue 改造 Bootstrap,渐进提升项目框架 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 [不要错过文末彩蛋] 前言 Vue ...
- List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac
List多个字段标识过滤 class Program{ public static void Main(string[] args) { List<T> list = new List& ...
- 用 Vue 改造 Bootstrap,渐进提升项目框架
前言 Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势.我认为 Vue 成功的关键在于三点: 学习曲线平缓,有点经验的前端基本上一天就能看完文档,然后就可以上手操作. 上 ...
- 基于Vue、web3的以太坊项目开发及交易内幕初探 错误解决总结
基于Vue.web3的以太坊项目开发及交易内幕初探 本文通过宏观和微观两个层面窥探以太坊底层执行逻辑. 宏观层面描述创建并运行一个小型带钱包的发币APP的过程,微观层面是顺藤摸瓜从http api深入 ...
随机推荐
- 2018-10-19-Roslyn-使用-Directory.Build.props-文件定义编译
title author date CreateTime categories Roslyn 使用 Directory.Build.props 文件定义编译 lindexi 2018-10-19 18 ...
- Libevent:1前言
一:libevent概述: libevent是一个用来编写快速.可移植.非阻塞IO程序的库,它的设计目标是:可移植性.高效.可扩展性.便捷. libevent包含下列组件: evutil:对不同平台下 ...
- 【NS2】使用SourceInsight阅读NS源代码全攻略(转载)
NS的源码底层是C++,采用了C++/Tcl分裂对象模型,架构完善,堪称OOP编程的典范.但是NS源码体系庞大,源文件有2千多个,阅读起来不是特别方便,我推荐使用SourceInsight3.5.具体 ...
- 2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 M. Frequent Subsets Problem【状态压缩】
2017 ACM-ICPC 亚洲区(南宁赛区)网络赛 M. Frequent Subsets Problem 题意:给定N和α还有M个U={1,2,3,...N}的子集,求子集X个数,X满足:X是U ...
- 洛谷P2512 [HAOI2008]糖果传递
//不开long long见祖宗!!! #include<bits/stdc++.h> using namespace std; long long n,ans,sum; ],s[]; i ...
- H3C路由器Telnet服务配置命令
- 将Eclipse中文注释字体变大方法
今天下了最新的eclipse玩,结果发现注释变得灰常小,差点看瞎哥24K氪金狗眼 于是在网上找了找解决方法,结果都不对 最后自己试出来了... 方法: Window --> Preferenc ...
- Android Studio(九):引用jar及so文件
Android Studio相关博客: Android Studio(一):介绍.安装.配置 Android Studio(二):快捷键设置.插件安装 Android Studio(三):设置Andr ...
- iptables发布内部网络服务器
要使因特网上的计算机访问到内部网的FTP服务器.WEB服务器,在做为防火墙的计算机上应添加以下规则: 1. echo 1 > /proc/sys/net/ipv4/ip_forward 2. 发 ...
- Java JDBC学习实战(一): JDBC的基本操作
一.JDBC常用接口.类介绍 JDBC提供对独立于数据库统一的API,用以执行SQL命令.API常用的类.接口如下: DriverManager,管理JDBC驱动的服务类,主要通过它获取Connect ...