Блог

Поэтому я хочу внедрить SocketIO в свое приложение Nuxt. Я использую Nuxt, Express, Axios, JWT, и теперь я хочу добавить SocketIO

После многих часов поиска, поиска и соскабливания фрагментов кода вместе у меня все получилось.

Мой сервер index.js:

 /* global base_dir abs_path */
require('dotenv').config()

global.base_dir = __dirname
global.abs_path = function(path) {
    // eslint-disable-next-line camelcase
    return base_dir   path
}
global.include = function(file) {
    return require(abs_path('/server/'   file))
}

const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')
const helmet = require('helmet')
// const jwt = require('jsonwebtoken')
const socketioJwt = require('socketio-jwt')

const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')
const app = require('express')()
const sio = require('socket.io')

app.use(require('express-status-monitor')({ path: '/admin/q/status' }))
// Import and Set Nuxt.js options
require('./server/auth/passport')

const config = require('./nuxt.config.js')
const { portalSeq } = require('./server/models')

config.dev = process.env.NODE_ENV !== 'production'

const api = require('./server/api')

// Init Nuxt.js
const nuxt = new Nuxt(config)

const { host, port } = nuxt.options.server

nuxt.ready()
// Build only in dev mode
if (config.dev) {
    const builder = new Builder(nuxt)
    builder.build()
}

app.use(helmet())
app.use(morgan('combined'))
app.use(bodyParser.json({ limit: '50mb', extended: true }))
app.use(bodyParser.urlencoded({ extended: true, limit: '50mb' }))
app.use(cors())

app.use('/api', api)

// Give nuxt middleware to express
app.use(nuxt.render)

// portalSeq.sync({ force: false }).then(() => {
const server = app.listen(port, host)
consola.ready({
    message: `Server listening on http://${host}:${port}`,
    badge: true
})
// })
// Listen the server

const io = sio.listen(server)

let i = 0
// Broadcast "tick" event every second
// Or do whatever you want with io ;)
setInterval(() => {
    i  
    io.emit('tick', i)
    console.log('ticks emited :', i)
}, 1000)

io.on(
    'connection',
    socketioJwt.authorize({
        secret: process.env.PRIVATE,
        timeout: 15000 // 15 seconds to send the authentication message
    })
)
    .on('authenticated', (socket) => {
        // this socket is authenticated, we are good to handle more events from it.
        console.log(`hello! ${socket.decoded_token.name}`)
    })
    .on('test', (data) => {
        console.log(data)
        io.emit('test', data)
    })

console.log(io)

console.log('socket.io is gestart, dendeze ier')
 

Мой клиентский тест.vue:

 <template>
    <div>
        <h1>Testing api</h1>
        <v-text-field v-model="latestTickId" />
        <v-btn @click="test" />
    </div>
</template>

<script>
// import socket from '../plugins/socket.io'
import io from 'socket.io-client'
/* eslint-disable no-undef */
export default {
    data() {
        return {
            latestTickId: 0,
            sessionStorage: null
        }
    },
    mounted() {
        const token = this.$store.state.user.token

        const socket = io.connect('http://192.168.41.15:3000')
        socket.on('connect', () => {
            socket
                .emit('authenticate', { token }) // send the jwt
                .on('authenticated', () => {
                    // do other things
                })
                .on('unauthorized', (msg) => {
                    console.log(`unauthorized: ${JSON.stringify(msg.data)}`)
                    throw new Error(msg.data.type)
                })
        })
        socket.on('tick', (tickId) => {
            this.latestTickId = tickId
        })
        socket.on('test', (data) => {
            console.log('incoming testdata: ', data)
        })
    },
    methods: {
        test() {
            socket.emit('test', { id: 'abc123' })
        }
    }
}
</script>
 

Когда я создаю свое приложение, это мой журнал за первые секунды:

 socket.io is gestart, dendeze ier
(node:16840) [SEQUELIZE0002] DeprecationWarning: The logging-option should be either a function or false. Default: console.log
(Use `node --trace-deprecation ...` to show where the warning was created)
√ Builder initialized                                                                                                                                                                           23:00:58
hello! undefined
√ Nuxt files generated                                                                                                                                                                          23:00:58

√ Client
  Compiled successfully in 12.94s

ticks emited : 1
Server is ready to take our messages
ticks emited : 2
ticks emited : 3
hello! undefined
ticks emited : 4
ticks emited : 5
ticks emited : 6
hello! undefined
ticks emited : 7
ticks emited : 8
hello! undefined
ticks emited : 9
ticks emited : 10
ticks emited : 11
 

мой результат, галочки получены:

затем веб-пакет вступает в действие:

и клиент перестает получать эмиссии…

Что я делаю не так? Спасибо вам за ваш совет.

пс. Я работаю над этим 3 дня, это сводит меня с ума, я действительно много старался!

Для будущих ссылок. я решил эту проблему. Экспресс и ввод-вывод не могут работать на одном и том же порту.

вместо

 const io = sio.listen(server)
 

Я использовал (на сервере)

 const io = sio.listen(3001)
 

и для клиента

 const socket = io(':3001')