前端使用sockJs进行聊天通讯的功能

import SockJS from 'sockjs-client';import Stomp from 'stompjs';var stompClient = null;// var customerId = '';  //客户Idvar info = {}; //所需参数信息function connect(payload) {  //建立连接var socket = new SockJS('https://xxxxxx');info = payloadstompClient = Stomp.over(socket);   //获取STOMP子协议的客户端对象if (stompClient) {stompClient.connect({}, onConnected, onError);  //向服务器发起websocket连接}}function onConnected() {  //ugid:用户组idvar quote = `{ugid: \"${info.fromUgid}\", type: \"${info.type}\", robotId: \"${info.robotId}\"}`;stompClient.subscribe('/user/' + info.fromAccount + '/customerMessage', onMessageReceived);   // 订阅服务端提供的某个topicstompClient.send('/app/userChat.addUser', {},JSON.stringify({ sender: info.fromAccount, content: quote, type: 'JOIN' }))}function onError(error) {console.log(error, '错误信息')}function sendMessage(event) {  //发送消息if (stompClient) {//转换时间let time = new Date().toLocaleDateString();time = time.split('/');time = time.join('-');let b = new Date().toTimeString();b = b.split(' ');b = b[0];time = `${time} ${b}`;stompClient.send('/app/userChat.sendMessage', {},// 需要的参数JSON.stringify(// `{'IsSeat':false,'msgType':901,'msgContent':{\"content\":\"${event}\",\"sendTime\":\"${time}\",\"receiverUserId\":\"2000\"},'msgId':'9ba19d69-4ea7-46b7-a0e1-a01811146e04','source':${info.fromDeviceId},'userId':${info.fromAccount}}`,{msgId: 'bb9ee191-e702-4952-b0f0-146df2151489',source: info.fromDeviceId,   //200代表H5msgContent: `{\"content\":\"${event}\",\"sendTime\":\"${time}\",\"receiverUserId\":\"2000\"}`,msgType: '901',IsSeat: false,userId: info.fromAccount,}));}}function onMessageReceived(payload) {console.log(payload, '存放的是服务端发送给我们的信息')}// // 断开连接// function disconnect() {//   if (stompClient != null) {//     stompClient.disconnect();//     console.log("断开连接");//   }// }export default {connect,onConnected,onError,sendMessage,// disconnect,stompClient,}

前端使用sockJs进行聊天通讯的功能相关推荐

蓝牙聊天App设计3：Android Studio制作蓝牙聊天通讯软件（完结，蓝牙连接聊天，结合生活情景进行蓝牙通信的通俗讲解，以及代码功能实现，内容详细，讲解通俗易懂）
前言:蓝牙聊天App设计全部有三篇文章(一.UI界面设计,二.蓝牙搜索配对连接实现,三.蓝牙连接聊天),这篇文章是:三.蓝牙连接聊天. 课程1:Android Studio小白安装教程,以及第一个An ...
从 0 到 1 开发一个聊天通讯服务复盘总结
前言在上个月初,接到一个需求,要开发一个聊天通讯模块并且集成到项目中的多个入口,实现业务数据的记录追踪. 接到需求后,还挺开心,这是我第一次搞通讯类的需求,之前一直是 B 端的业 ...
在线登记系统代码 php_PHP框架实现WebSocket在线聊天通讯系统
ThinkPHP使用Swoole需要安装think-swooleComposer包,前提系统已经安装好了SwoolePECL拓展 tp5的项目根目录下执行composer命令安装think-swool ...
蓝牙聊天App设计1：Android Studio制作蓝牙聊天通讯软件（UI界面设计）
前言:蓝牙聊天App设计全部有三篇文章(一.UI界面设计,二.蓝牙搜索配对连接实现,三.蓝牙连接聊天),这篇文章是一.UI界面设计课程1:Android Studio小白安装教程,以及第一个Andr ...
php实现网站客服聊天/在线沟通功能
php实现网站客服聊天/在线沟通功能这是后台页面这是访客页面前后端数据交互格式 JSON 前端框架 VUE Element UI JavaScript 后端技术 mysql 5.6 php 5. ...
【客服系统】在线客服系统源码外贸聊天通讯带翻译多语言支持网页安卓苹果打包封装APP
随着全球化的加速推进,外贸行业对于在线客服系统的需求日益增长.一款功能强大.支持多语言交流.适用于网页和移动端的在线客服系统源码成为了众多企业的首选.本文将介绍一款名为"外贸聊天通讯带翻译多 ...
网站/页面即时聊天客服功能
网站/页面即时聊天客服功能实现效果截图这是后台页面这是访客页面前后端数据交互格式 JSON 前端框架 VUE Element UI JavaScript 后端技术 mysql 5.6 php 5 ...
python后端开发框架加密_Flask框架实现的前端RSA加密与后端Python解密功能详解
本文实例讲述了Flask框架实现的前端RSA加密与后端Python解密功能.分享给大家供大家参考,具体如下: 前言在使用 Flask 开发用户登录API的时候,我之前都是明文传输 username ...
客户端程序初步加入网络通讯的功能
文章目录 1 客户端初步加入网络通讯的功能 1.1 设计方案 1.2 代码实现 1 客户端初步加入网络通讯的功能 1.1 设计方案在主窗口类中使用客户端类: 初步设计方案: 主窗口通过ClientD ...

前端使用sockJs进行聊天通讯的功能

前端使用sockJs进行聊天通讯的功能相关推荐

最新文章

热门文章