websocket 實現 前端vue-socket.io 服務端 koa2(socket.io)

前端：（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} - ${ms}ms`)

})

// 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

 

 

 

 

----完----

 

上述代碼複製粘貼可用。