创建socket.io服务,vue3使用vue-3-socket.io进行连接
在ubuntu服务器上创建一个js文件var app = require('express')();var http = require('http').Server(app);var io = require('socket.io')(http);app.get('/', function(req, res){res.send('<h1>这是一个socket服务</h1>
·
在ubuntu服务器上创建一个js文件
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.send('<h1>这是一个socket服务</h1>');
});
io.on('connection',function(socket) {
//接收数据
socket.on('login', function (obj) {
console.log(obj.username);
// 发送数据
socket.emit('relogin', {
msg: `你好${obj.username}`,
code: 200
});
});
});
http.listen(8848, function(){
console.log('listening on *:8848');
});
ubuntu启动服务
node xxx.js
vue安装依赖
npm install vue-3-socket.io --save
npm install socket.io-client --save
vue进行连接,在main.js中
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueSocketIO from 'vue-3-socket.io'
import io from 'socket.io-client';
const socketio = new VueSocketIO({
debug: true,
connection: io('http://xxxx:8848',{ transports : ['websocket'] }),
//http:自己的服务:端口
extraHeaders: {"Access-Control-Allow-Origin": '*'},
});
const app = createApp(App)
app.use(store)
app.use(router)
app.use(socketio)
app.mount('#app')
在vue页面上监听接受的
mounted(){
this.sockets.subscribe('relogin', (data) => {
console.log("获取到他发给我的",data)
})
}
按钮进行发送
send(){
console.log("我发送消息给服务端");
//发送信息给服务端
this.$socket.emit('login',{
username: 'ajj',
password: '123456'
});
},
最终效果
更多推荐
已为社区贡献2条内容
所有评论(0)