第一步 创建nodeJS的http服务器,作为socket服务端
新建文件夹,命名为NodejsScoketDemo,然后使用终端,npm init ,一路回车即可
加入express依赖和socket.io依赖
npm install express socket.io
这是我使用的依赖版本
工程目录如图:
socket.js代码
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIO(server,{
cors: {
origin: '*'
}
});
io.on('connection',(socket) => {
console.log('user connected');
socket.on('hello',(data) => {
console.log(`收到客户端的消息:${data}`);
})
});
app.get('/',(request, response) => {
/*在浏览器发送 http://127.0.0.1:24000 的请求,客户端定义了监听'message'的socket,所以可以接收消息,即使客户端有代码
io.on('message',(data) => {
console.log(data);
});
*/
io.emit('message','服务端向客户端推送消息...');
response.writeHead(200, {"Content-type": "text/plain"});
response.end();
});
server.listen(24000,() => {
console.log("server is up and running on port 24000");
});
谷歌度娘,十有八九都是说配置前端的config目录下的index.js文件的代理,结果都是无效的,仍然报跨域被阻止的错误,其实关键不是说这个代理不用设置,要设置。关键在下边这块代码
const io = socketIO(server,{
cors: {
origin: '*'
}
});
那么这时候,我们就可以直接使用命令启动socket.js ,开启http服务器,并且监听24000端口
node src/socket/socket.js
第二步 创建vue-cli脚手架,作为socket客户端
npm init webpack vuesocketdemo
引入依赖
npm install vue-socket.io socket.io-client
这些是我引入的依赖版本,理论上,只引入socket.io-client 依赖就够了
我们在main.js导入依赖,并且使用它,SocketIO里面填写ws://IP:监听的服务器端口
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
Vue.use(new VueSocketIO({
debug: true,
connection: SocketIO('ws://127.0.0.1:24000')
}));
接下来,我们在conifg的index.js文件中配置代理,注意,第二个代理路劲的wa属性必须设置为false,否则还会报跨域被阻止的错误
proxyTable: {
'/socket.io':{
target: 'http://127.0.0.1:24000/', // target host
changeOrigin: true, // needed for virtual hosted sites
logLevel: 'debug'
},
'/sockjs-node': {
target: 'http://127.0.0.1:24000',
ws: false,
changeOrigin: true
}
}
最后,我们在HelloWorld.vue 编写socket代码
在html部分,编写一个按钮和输入框,用来发送消息给服务器
<template>
<div class="hello">
<input id="inputArea" type="text">
<button @click="sendMsgToServer">发送消息给服务端</button>
</div>
</template>
在javascript部分,连接到服务器,并且编写一个发送输入的消息给服务器的程序
<script>
import io from 'socket.io-client';
const socket = io('http://127.0.0.1:24000');
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
/*socket.emit('hello','xxx') 表示,服务端上定义了一个监听'hello'的socket,
即服务端有代码
socket.on('hello',(data) => {
//这是接收到的客户端消息
console.log(data);
})
*/
sendMsgToServer(){
socket.emit('hello',document.getElementById("inputArea").value);
}
},
created() {
socket.on('message',(data) =>{
console.log(data)
});
}
}
</script>
样式部分我就没定义了
第三步 测试
服务端启动http服务器以监听socket 24000端口
node src/socket/socket.js
启动客户端vue
npm run dev
测试浏览器发送请求给http服务器,委托http服务器把消息推送给客户端
测试客户端发送消息给服务端