自定的学习计划中终于到了websocket这一块了,其实很早就像搞这一块但是之前堆积了一堆其他更重要的东西。
以前对于即时聊天的实现思路就是轮询后端的接口,这样的方式是一种“假即时聊天”,websocket才是最佳的方式。
前端出身的我自然是用node作为服务端。那么我们开始吧!!!
方案一(html+node)
这种方式适用于原生的js+html项目。
客户端直接使用原生的WebSocket对象这里的通信协议不能再是http了这里需要使用ws协议。关于websocket就不多解释了直接看文档websocket的文档
let ws = new WebSocket('ws://localhost:8081')
ws.onopen = function (e) {
ws.send('342342342');//发送消息
}
ws.onmessage = function (e) {//接收消息
console.log(e)
}
服务端没有直接使用node自带的net模块(ws协议似乎有问题),这里需要安装一个ws第三方模块
npm install ws
通过ws模块来创建socket通信,这里连接和发送信息的方式和原生的net模块类似node原生net
var app = require('ws').Server;
let ws = new app({
port: 8081
})
ws.on('connection', (socket) => {
socket.on('message', function (message) {//接收信息
console.log(message);
socket.send(3242111111111111111111114324)//发送消息
});
})
console.log('app listen at:' + 8081);
使用
首先命令行node启动服务端,然后打开html,这样就能在控制台和命令行中看到打印结果验证时候通信成功。
方案二
方案二是针对vue项目的发送类似于vue的组件间的通信
需要先安装两个依赖包vue-socket.io用于vue中,socket.io用于node
npm install socket.io vue-socket.io --save
客户端在vue对象上安装vue-scoket.io得到socket对象,和方案以不同的是这边使用的是http协议(原生的websocket不能使用http协议),这里socket对象中的方法名要对应服务端emit发送的名字
<template>
<div class="socket">
socket
{{value}}
</div>
</template>
<script>
import Vue from 'vue'
import VueSocketio from "vue-socket.io";
Vue.use(new VueSocketio({
debug: true,
connection: 'http://localhost:8081'
}))
export default {
name: "socket",
components: {},
data() {
return {
value: 0
};
},
mounted() {
this.$socket.emit('send',31231231)//发送socket到服务端
},
sockets: {
connect() {
console.log("连接成功啦");
},
aboutValue(res) {//接收到服务端socket
this.value = res;
console.log(res);
}
}
};
</script>
<style lang='scss' scoped>
</style>
服务端通过node原生的http协议和scoket.io建立socket通信
var app = require('http').createServer();
var io = require('socket.io')(app);
var PORT = 8081;
app.listen(PORT);
io.on('connection', function (socket) {
console.log('连接了')
socket.on('send',(data) => {//接收客户端socket
console.log(data)
io.sockets.emit('aboutValue', '发送socket');
})
})
console.log('app listen at:' + PORT);
相对于方案二,方案一使用的是ws协议而方案二使用的是http协议。
积少成多加油!!!