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
----完----
上述代码复制粘贴可用。