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