websocket 实现 前端vue-socket.io 服务端 koa2(socket.io)

Posted 2022-01-01 liuliu-hai

前端：（vue项目，main.js）

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue‘

import App from ‘./App‘

import router from ‘./router‘

// import VueNativeSock from ‘vue-native-websocket‘

// Vue.use(VueNativeSock, ‘ws://localhost:3000‘,

// passToStoreHandler: function (eventName, event, next)

// event.data = event.should_have_been_named_data

// next(eventName, event)

//

// )

import VueSocketIO from ‘vue-socket.io‘

Vue.use(new VueSocketIO(

debug: true,

connection: ‘ws://localhost:8888/self‘,

forceNew: true,

// vuex:

// store,

// actionPrefix: ‘SOCKET_‘,

// mutationPrefix: ‘SOCKET_‘

// ,

options: path: "" //Optional options

))

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue(

el: ‘#app‘,

router,

components: App ,

template: ‘<App/>‘

)

 

前端--在组件中使用：（HelloWorld.vue 组件）

<template>

<div class="hello">

<h1> msg </h1>

<h2>Essential Links</h2>

</div>

</template>

<script>

export default

name: "HelloWorld",

data()

return

msg: "Welcome to Your Vue.js App"

;

,

mounted()

this.onsocket();

this.sockets.subscribe("client_event", data =>

console.log(data);

// this.msg = data.message;

);

,

sockets:

connect: function()

console.log("客户端检测到 socket connected------------");

,

server_event: function(data)

console.log(

‘ 服务端定义的事件名字："server_event" socket server. eg: io.emit("server_event", data)‘

);

console.log(data);

,

methods:

onsocket()

this.$socket.emit("client_event", origin: "client" );

;

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h1,

h2

font-weight: normal;

ul

list-style-type: none;

padding: 0;

li

display: inline-block;

margin: 0 10px;

a

color: #42b983;

</style>

 

 

 

----------------------------------------------------------------------------------------------------------------

 

 

 

服务端：(koa2项目，app.js)

 

const Koa = require(‘koa‘)

const app = new Koa()

const views = require(‘koa-views‘)

const json = require(‘koa-json‘)

const onerror = require(‘koa-onerror‘)

const bodyparser = require(‘koa-bodyparser‘)

const logger = require(‘koa-logger‘)

const index = require(‘./routes/index‘)

const users = require(‘./routes/users‘)

// error handler

onerror(app)

// middlewares

app.use(bodyparser(

enableTypes:[‘json‘, ‘form‘, ‘text‘]

))

app.use(json())

app.use(logger())

app.use(require(‘koa-static‘)(__dirname + ‘/public‘))

app.use(views(__dirname + ‘/views‘,

extension: ‘pug‘

))

// logger

app.use(async (ctx, next) =>

const start = new Date()

await next()

const ms = new Date() - start

console.log(`$ctx.method $ctx.url - $msms`)

)

// routes

app.use(index.routes(), index.allowedMethods())

app.use(users.routes(), users.allowedMethods())

// error-handling

app.on(‘error‘, (err, ctx) =>

console.error(‘server error‘, err, ctx)

);

//using websocket

// const server = require(‘http‘).createServer(app.callback());

// const io = require(‘socket.io‘)(server);

// io.on(‘connection‘, client =>

// console.log("有连接动作");

// client.on(‘event‘, data => /* … */ );

// client.on(‘disconnect‘, () => /* … */ );

// );

const io = require(‘socket.io‘)();

// io.on(‘connection‘, client =>

 

// );

io.of(‘/self‘).on(‘connection‘, client =>

console.log("服务端检测到连接----") ;

var data_obj=

name:"name",

age:12

io.of(‘/self‘).emit(‘server_event‘,data_obj); // emit an event to all connected sockets

client.on("client_event",function(data)

console.log("client_event");

console.log(data)

)

client.on(‘disconnect‘, () => /* … */ );

);

io.listen(8888);

// server.listen(8888);

module.exports = app

 

 

 

 

----完----

 

上述代码复制粘贴可用。