【发布时间】：2017-12-19 00:34:51
【问题描述】：
大家正在构建一个 SPA（单页应用程序）聊天应用程序，使用 Vuejs 作为前端，Laravel 5.4 作为我的后端 API。 为了实现实时通信体验，我使用 express 构建了一个基本节点服务器，并在我的 vue 前端项目上安装了 vue-socket.io，但 vue 项目似乎没有连接到节点服务器。请问我在这里缺少什么？ 这就是我所做的：
server.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var redis = require('redis');
app.get('/', function(req, res){
res.send('<h1>Hello world</h1>');
});
function logData(message) {
var d = new Date();
var time = '[' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '] '
console.log(time + message);
}
function logMultipleData(message, channel, data) {
var d = new Date();
var time = '[' + d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds() + '] '
console.log(time + message + channel + data);
}
server.listen(3000, function() {
logData('Chat server booted on *:3000');
});
io.on('connection', function(socket) {
console.log('new client connected');
var redisClient = redis.createClient();
redisClient.subscribe('message');
redisClient.on('message', function (channel, message) {
logMultipleData('New Message In Queune', channel, message);
})
});
Main.js（此文件在 vue 前端项目中）
import Vue from 'vue'
import App from './App.vue'
import Router from './routes.js'
import VueResource from 'vue-resource'
import VueSocketIO from 'vue-socket.io';
Vue.use(VueResource)
Vue.use(VueSocketIO, 'http://localhost.com:8890');
new Vue({
el: '#app',
render: h => h(App),
router: Router
})
Test.vue（我的测试组件）
<template>
<!--Mask-->
<div class="view">
<img class="background" src="/src/assets/images/background.jpg" alt="">
<!--Intro content-->
<div class="full-bg-img flex-center">
<div class="container">
<div class="row">
<div class="col-lg-4 offset-4">
<!--Form with header-->
<div class="card section">
<div class="progress">
<div class="indeterminate" style="width: 70%"></div>
</div>
<div class="card-block">
<!--Header-->
<!-- <div class="form-header purple darken-4">
<h3><i class="fa fa-lock"></i> Register:</h3>
</div> -->
<!--Body-->
<button @click="clickButton">Ping Server</button>
<blockquote class="blockquote bq-primary">
<!-- <p class="bq-title">User Name</p> -->
please enter a username or take one of the suggestions below.
</blockquote>
<form v-on:submit.prevent="handleLoginFormSubmit()">
<div class="md-form">
<!-- <i class="fa fa-envelope-o prefix"></i> -->
<input type="text" placeholder="Email / Username" id="email" v-model="login.email" class="form-control validate" required autofocus>
<div class="error-log"></div>
</div>
<div class="text-center">
<button id="load-btn" class="btn btn-deep-purple" disabled><set-loader></set-loader></button>
<button id="login-btn" class="btn btn-deep-purple">Login</button>
</div>
</form>
</div>
<!--Footer-->
<div class="modal-footer">
<!-- Stepers Wrapper -->
<ul class="stepper stepper-horizontal">
<!-- First Step -->
<li class="active">
<a href="#!">
<span class="circle">1</span>
</a>
</li>
<!-- Second Step -->
<li class="">
<a href="#!">
<span class="circle">2</span>
</a>
</li>
<!-- Third Step -->
<li class="">
<a href="#!" disabled>
<span class="circle">3</span>
</a>
</li>
<!-- Fourth Step -->
<li class="">
<a href="#!" disabled>
<span class="circle">4</span>
</a>
</li>
</ul>
</div>
</div>
<!--/Form with header-->
</div>
</div>
</div>
</div>
<!--/Intro content-->
</div>
<!--/.Mask-->
</template>
<script>
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io';
import Chip from './helper/chipNoavatar.vue'
import Loader from './helper/loaders/multicolors/small.vue'
Vue.use(VueSocketIO, 'http://localhost.com:3000');
export default {
components: {
'set-chip': Chip,
'set-loader': Loader
},
data() {
return {
login: {
email: '',
}
}
},
created() {
},
sockets:{
connect: function(){
console.log('socket connected')
},
disconnect: function(){
console.log('socket disconnected')
},
customEmit: function(val){
console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
}
},
mounted() {
//do something after mounting vue instance
// Data Picker Initialization
// $('.datepicker').pickadate({
// min: new Date(1910, 0, 0),
// max: new Date(2012, 0, 0)
// });
},
methods: {
handleLoginFormSubmit() {
// $("#login-btn").hide()
// $("#load-btn").show()
var postData = {
client_id: 2,
client_secret: this.$afrobukConfig.client_secret,
grant_type: 'password',
username: this.login.email,
remember: true
}
this.$http.post("api/test", postData)
.then(response => {
console.log(response.body)
})
.catch(function(error) {
console.log(error);
});
},
clickButton: function(val){
// $socket is socket.io-client instance
this.$socket.emit('emit_method', val);
}
}
}
</script>
<style>
</style>
谁能帮我解决这个问题？谢谢
【问题讨论】：
标签： node.js express socket.io vue.js