From cd95f0f9a086c333c23349b3db8f049eea34e369 Mon Sep 17 00:00:00 2001 From: ronger Date: Thu, 25 Mar 2021 21:48:05 +0800 Subject: [PATCH] :poop: websocket --- components/layouts/pc/header.vue | 2 + config/api.config.js | 4 +- io/index.js | 28 -- nuxt.config.js | 4 +- package.json | 21 +- pages/admin/tag/post/_tag_id.vue | 29 +- pages/admin/topic/post/_topic_id.vue | 26 +- pages/article/post/_article_id.vue | 30 +- pages/chats/_nickname.vue | 445 ++++++++++++------------- pages/portfolio/post/_portfolio_id.vue | 27 +- pages/user/_nickname.vue | 2 +- plugins/socket.io.js | 8 - plugins/sockjs.js | 72 ++++ server/index.js | 22 +- 14 files changed, 382 insertions(+), 338 deletions(-) delete mode 100644 io/index.js delete mode 100644 plugins/socket.io.js create mode 100644 plugins/sockjs.js diff --git a/components/layouts/pc/header.vue b/components/layouts/pc/header.vue index f083b7a..32418dd 100644 --- a/components/layouts/pc/header.vue +++ b/components/layouts/pc/header.vue @@ -107,6 +107,7 @@ diff --git a/pages/portfolio/post/_portfolio_id.vue b/pages/portfolio/post/_portfolio_id.vue index d7db4c2..755e444 100644 --- a/pages/portfolio/post/_portfolio_id.vue +++ b/pages/portfolio/post/_portfolio_id.vue @@ -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('系统可能不会保存您所做的更改。', '离开此网站?', { - confirmButtonText: '确定', - cancelButtonText: '取消', - type: 'warning' - }).then(() => { + 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(); - }).catch(() => { - return false - }); + } }, beforeDestroy() { window.onbeforeunload = null; diff --git a/pages/user/_nickname.vue b/pages/user/_nickname.vue index f55dd96..2284fcc 100644 --- a/pages/user/_nickname.vue +++ b/pages/user/_nickname.vue @@ -35,7 +35,7 @@
取消关注 关注 - 聊天 + 聊天
diff --git a/plugins/socket.io.js b/plugins/socket.io.js deleted file mode 100644 index 1b059d6..0000000 --- a/plugins/socket.io.js +++ /dev/null @@ -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 diff --git a/plugins/sockjs.js b/plugins/sockjs.js new file mode 100644 index 0000000..1fc9bad --- /dev/null +++ b/plugins/sockjs.js @@ -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)) + } +} diff --git a/server/index.js b/server/index.js index bf12eae..4662621 100644 --- a/server/index.js +++ b/server/index.js @@ -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) - }); - -})