两种websocket实现的方案(html+node，vue+node)

本文链接： https://blog.csdn.net/qq_40816649/article/details/102703992

自定的学习计划中终于到了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协议。
积少成多加油！！！

两种websocket实现的方案(html+node，vue+node)

猜你喜欢