peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💩 websocket

Browse Source
This commit is contained in:
ronger 2021-03-25 21:48:05 +08:00
parent 267f05fd25
commit cd95f0f9a0
14 changed files with 382 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layouts/pc/header.vue
View File

@ -107,6 +107,7 @@
<script>
import {mapState} from 'vuex';
import {isBrowser} from '~/environment';
import sockClient from '~/plugins/sockjs';
const Cookie = process.client ? require('js-cookie') : undefined
export default {
@ -270,6 +271,7 @@ export default {
let user = this.user;
if (user) {
this.getUnreadNotifications();
sockClient.initSocket(this.$store.state.userInfo);
}
}

4
config/api.config.js
View File

@ -6,7 +6,7 @@ const apisMap = {
BASE: 'http://localhost:8099/forest',
CDN: '',
PROXY: '/proxy',
SOCKET: 'http://localhost:3000',
SOCKET: 'http://localhost:3000/ws',
GRAVATAR: '/proxy/static.rymcu.com/avatar'
},
production: {
@ -14,7 +14,7 @@ const apisMap = {
BASE: 'https://rymcu.com',
CDN: 'https://static.rymcu.com',
PROXY: 'https://static.rymcu.com/proxy',
SOCKET: 'https://rymcu.com',
SOCKET: 'https://rymcu.com/ws',
GRAVATAR: 'https://static.rymcu.com/avatar'
}
}

28
io/index.js
View File

@ -1,28 +0,0 @@
import http from 'http'
import socketIO from 'socket.io'
export default function () {
this.nuxt.hook('render:before', (renderer) => {
const server = http.createServer(this.nuxt.renderer.app)
const io = socketIO(server)
// overwrite nuxt.server.listen()
this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
// close this server on 'close' event
this.nuxt.hook('close', () => new Promise(server.close))
// Add socket.io events
const messages = []
io.on('connection', (socket) => {
socket.on('last-messages', function (fn) {
console.log('messages-client', messages);
fn(messages.slice(-50))
})
socket.on('all', function (message) {
console.log('message-client', message);
messages.push(message)
socket.broadcast.emit('new-message', message)
})
})
})
}

4
nuxt.config.js
View File

@ -70,7 +70,6 @@ export default {
** Nuxt.js modules
*/
modules: [
'~/io',
'@nuxtjs/axios',
'@nuxtjs/proxy',
'js-cookie',
@ -83,6 +82,9 @@ export default {
['/api', {
target: apiConfig.BASE, //api请求路径
pathRewrite: {'^/api': isDevMode ? '/api/v1' : '/api'} //重定向请求路径，防止路由、api路径的冲突
}],
['/ws', {
target: apiConfig.BASE //api请求路径
}]
],
/*

21
package.json
View File

@ -11,10 +11,10 @@
},
"dependencies": {
"@chenfengyuan/vue-qrcode": "^1.0.2",
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.1",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/vue-fontawesome": "^2.0.2",
"@nuxtjs/axios": "^5.13.1",
"babel-plugin-lodash": "^3.3.4",
@ -23,19 +23,20 @@
"element-ui": "^2.15.1",
"express": "^4.17.1",
"js-cookie": "^2.2.1",
"nuxt": "^2.15.2",
"net": "^1.0.2",
"nuxt": "^2.15.3",
"raw-loader": "^4.0.2",
"save-svg-as-png": "^1.4.17",
"socket.io": "^2.4.1",
"socket.io-client": "^2.4.0",
"vditor": "^3.8.2",
"sockjs-client": "^1.5.0",
"stompjs": "^2.3.3",
"vditor": "^3.8.3",
"vue-cropperjs": "^4.2.0",
"vuejs-avataaars": "^4.0.1"
},
"devDependencies": {
"@nuxtjs/proxy": "^2.1.0",
"lodash-webpack-plugin": "^0.11.6",
"node-sass": "^4.12.0",
"sass-loader": "^9.0.3"
"node-sass": "^5.0.0",
"sass-loader": "^10.1.1"
}
}

15
pages/admin/tag/post/_tag_id.vue
View File

@ -92,7 +92,8 @@ export default {
tagIconPath: '',
loading: false,
isEdit: false,
tag: {}
tag: {},
notificationFlag: true
}
},
methods: {
@ -233,21 +234,27 @@ export default {
message: title + '成功!'
});
_ts.$set(_ts, 'loading', false);
// _ts.getData();
_ts.$set(_ts, 'notificationFlag', false);
}
})
}
},
beforeRouteLeave(to, from, next) {
this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
let _ts = this;
if (_ts.notificationFlag) {
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next();
}).catch(() => {
_ts.$store.commit("setActiveMenu", "admin-tag-post");
return false
});
} else {
next();
}
},
beforeDestroy() {
window.onbeforeunload = null;
@ -265,7 +272,7 @@ export default {
return '关闭提示';
});
let _ts = this;
this.$store.commit('setActiveMenu', 'postAdminTag');
this.$store.commit('setActiveMenu', 'admin-tag-post');
this.$axios.$get('/api/upload/simple/token').then(function (res) {
if (res) {
_ts.$store.commit('setUploadHeaders', res.uploadToken);

12
pages/admin/topic/post/_topic_id.vue
View File

@ -106,7 +106,8 @@ export default {
token: ''
},
topicIconPath: '',
isEdit: false
isEdit: false,
notificationFlag: true
}
},
methods: {
@ -246,6 +247,7 @@ export default {
message: title + '成功!'
});
_ts.$set(_ts, 'loading', false);
_ts.$set(_ts, 'notificationFlag', false);
_ts.contentEditor.setValue('');
_ts.$router.push({
path: `/admin/topic/${data.topicUri}`
@ -255,15 +257,21 @@ export default {
}
},
beforeRouteLeave(to, from, next) {
this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
let _ts = this;
if (_ts.notificationFlag) {
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next();
}).catch(() => {
_ts.$store.commit("setActiveMenu", "admin-topic-post");
return false
});
} else {
next();
}
},
beforeDestroy() {
window.onbeforeunload = null;

16
pages/article/post/_article_id.vue
View File

@ -87,7 +87,8 @@
list: [],
loading: false,
doLoading: false,
isEdit: false
isEdit: false,
notificationFlag: true
}
},
methods: {
@ -232,6 +233,7 @@
localStorage.removeItem('article-title');
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
name: 'index'
})
@ -271,6 +273,7 @@
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$store.commit('article/clearDetailData')
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
path: `/article/${res.id}`
})
@ -307,6 +310,7 @@
localStorage.removeItem('article-title');
localStorage.removeItem('article-tags');
_ts.contentEditor.setValue('');
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
path: `/draft/${res.id}`
})
@ -323,7 +327,9 @@
}
},
beforeRouteLeave(to, from, next) {
this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
let _ts = this;
if (_ts.notificationFlag) {
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
@ -332,6 +338,10 @@
}).catch(() => {
return false
});
_ts.$store.commit("setActiveMenu", "article-post");
} else {
next();
}
},
beforeDestroy() {
window.onbeforeunload = null;
@ -349,7 +359,7 @@
return '关闭提示';
});
let _ts = this;
_ts.$store.commit('setActiveMenu', 'post-article');
_ts.$store.commit('setActiveMenu', 'article-post');
const responseData = await _ts.$axios.$get('/api/upload/token');
if (responseData) {
_ts.$set(_ts, 'tokenURL', {

23
pages/chats/_nickname.vue
View File

@ -1,4 +1,4 @@
template>
<template>
<client-only>
<el-row class="wrapper" v-if="user">
<el-col>
@ -38,15 +38,10 @@ template>
<script>
import Vue from 'vue';
import {mapState} from 'vuex';
import socket from '~/plugins/socket.io.js';
import sockClient from '~/plugins/sockjs';
export default {
name: "Chat",
asyncData() {
return new Promise(resolve =>
socket.emit('last-messages', messages => resolve({messages}))
)
},
computed: {
...mapState({
user: state => state.userInfo
@ -65,7 +60,8 @@ template>
initEditor: false,
isShow: true,
loading: false,
to: {}
to: {},
messages: []
}
},
watch: {
@ -73,11 +69,6 @@ template>
console.log(value);
}
},
beforeMount() {
socket.on('new-message', (message) => {
this.messages.push(message)
})
},
methods: {
_initEditor(data) {
let _ts = this;
@ -151,9 +142,7 @@ template>
url: this.tokenURL.URL,
linkToImgUrl: this.tokenURL.linkToImageURL,
token: this.tokenURL.token,
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
replace('/\\s/g', '')
filename: name => name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
},
height: data.height,
counter: 102400,
@ -175,7 +164,7 @@ template>
}
_ts.messages.push(message);
_ts.contentEditor.setValue('')
socket.emit('all', message);
sockClient.sendMessage(message)
}
},
async mounted() {

13
pages/portfolio/post/_portfolio_id.vue
View File

@ -138,7 +138,8 @@ export default {
headImgUrl: '',
cropImg: '',
isEdit: false,
autoCrop: true
autoCrop: true,
notificationFlag: true
}
},
methods: {
@ -282,6 +283,7 @@ export default {
type: 'success',
message: title + '成功!'
});
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
path: '/portfolio/' + res.idPortfolio
})
@ -305,6 +307,7 @@ export default {
if (res.message) {
_ts.$message(res.message);
} else {
_ts.$set(_ts, 'notificationFlag', false);
_ts.$router.push({
path: '/user/' + _ts.$store.state.userInfo?.nickname
})
@ -339,15 +342,21 @@ export default {
}
},
beforeRouteLeave(to, from, next) {
this.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
let _ts = this;
if (_ts.notificationFlag) {
_ts.$confirm('系统可能不会保存您所做的更改。', '离开此网站?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
next();
}).catch(() => {
_ts.$store.commit("setActiveMenu", "portfolio-post");
return false
});
} else {
next();
}
},
beforeDestroy() {
window.onbeforeunload = null;

2
pages/user/_nickname.vue
View File

@ -35,7 +35,7 @@
<div v-if="oauth.idUser !== user.idUser">
<el-button type="primary" v-if="isFollow" @click="cancelFollowUser(user.idUser)" plain>取消关注</el-button>
<el-button type="primary" v-else @click="followUser(user.idUser)" plain>关注</el-button>
<el-button v-show="false" @click="gotoChats" plain>聊天</el-button>
<el-button @click="gotoChats" plain>聊天</el-button>
</div>
</div>
<div v-else>

8
plugins/socket.io.js
View File

@ -1,8 +0,0 @@
import io from 'socket.io-client'
import apiConfig from '~/config/api.config'
const socket = io(apiConfig.SOCKET, {
transports: ['websocket']
})
export default socket

72
plugins/sockjs.js Normal file
View File

@ -0,0 +1,72 @@
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import apiConfig from '~/config/api.config'
export default {
socket: null,
stompClient: null,
headers: null,
successCallback() {
let _ts = this;
_ts.stompClient.subscribe(`/user/${_ts.headers.id}/message`, (msg) => {
let message = JSON.parse(msg.body);
console.log(message.dataType)
switch (message.dataType) {
case 0:
console.log(message.content)
break;
case 1:
console.log(message.to)
break;
default:
console.log(message)
}
}, _ts.headers);
_ts.stompClient.subscribe('/topic/greening', (msg) => {
console.log('pub', JSON.parse(msg.body));
});
},
initSocket: function (user) {
let _ts = this;
_ts.socket = new SockJS(apiConfig.SOCKET);
_ts.stompClient = Stomp.over(_ts.socket);
let headers = {
id: user.nickname
}
_ts.headers = headers;
_ts.stompClient.connect(_ts.headers, () => {
_ts.successCallback();
}, (err) => {
console.log(err)
_ts.reconnect(apiConfig.SOCKET, _ts.successCallback)
})
},
// 断开重连使用定时器定时连接服务器
reconnect(socketUrl, successCallback) {
console.info('in reconnect function')
let connected = false
let _ts = this
const reconInv = setInterval(() => {
console.info('in interval' + Math.random())
_ts.socket = new SockJS(socketUrl)
_ts.stompClient = Stomp.over(this.socket)
_ts.stompClient.connect({}, (frame) => {
console.info('reconnected success')
// 连接成功，清除定时器
clearInterval(reconInv)
connected = true
successCallback()
}, () => {
console.info('reconnect failed')
console.info('connected:' + connected)
if (connected) {
console.info('connect .... what?')
}
})
}, 2000)
},
sendMessage: function (message) {
this.stompClient.send('/app/message', {}, JSON.stringify(message))
}
}

22
server/index.js
View File

@ -1,8 +1,6 @@
const { Nuxt, Builder } = require('nuxt')
const http = require('http')
const app = require('express')()
const socketio = require('socket.io')
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 3000
@ -10,8 +8,6 @@ const port = process.env.PORT || 3000
const config = require('./nuxt.config.js')
config.dev = !isProd
const nuxt = new Nuxt(config)
const server = new http.Server(app)
const io = socketio(server, { transports: ['websocket'] })
// 用 Nuxt.js 渲染每个路由
app.use(nuxt.render)
@ -28,21 +24,5 @@ if (config.dev) {
function listen () {
// 服务端监听
app.listen(port, '0.0.0.0')
console.log('Server listening on `localhost:' + port + '`.')
console.log(`Server listening on localhost:${port}.`)
}
// Socket.io
const messages = []
io.on('connection', (socket) => {
socket.on('last-messages', function (fn) {
console.log('messages-server', messages);
fn(messages.slice(-50))
});
socket.on('all', function (message) {
console.log('message-server', message);
messages.push(message)
socket.broadcast.emit('new-message', message)
});
})