在rails5之后新增了actioncable实现websocket。通过它可以很方便的搭建websocket服务地端代码，和rails项目的其他功能配合使用非常的方便。具体的服务器端和coffeescript结合的方法此处不做介绍，需要的可以参考作者的文章。
actioncable-examples
actioncable
在vue中使用actioncable，首先需要安装相应的依赖
yarn add actioncable
在vue项目的启动文件中引入actioncable
import ActionCable from "actioncable" // import actioncable
...
Vue.prototype.$cable = ActionCable.createConsumer("ws://localhost:3000/cable"); // create client
...
// 在后续的组件中可以直接使用this.$cable
ws.vue
<template>
<div class="container">
<button @click="wsLogin">登录(ws)</button>
</div>
</template>
<script>
export default {
data() {
return {
channel: {}, // 当前订阅的频道
}
},
created() {
this.channel = this.$cable.subscriptions.create('ChatRoomChannel', {
connected() {
console.log('client connected to server!')
},
disconnected() {
console.log('client disconnected from server!')
},
received(data) {
console.group('received data from server');
console.log(data);
console.groupEnd();
},
});
},
methods: {
wsLogin() {
// 向服务器端发送消息
this.channel.perform('login', {
user: '赵医生',
});
},
}
}
</script>
