栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

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

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

两种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发送的名字

   

服务端通过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协议。
积少成多加油!!!


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/240224.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号