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

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