当前位置: 首页 > news >正文

WebSocket使用

是什么

一种网络通信协议(握手阶段使用的是http 1.1),如果需要服务端主动向客户端推送信息可以使用它。

优势

  • 全双工,服务端和客户端可以互通消息。

  • 相对于各种论询,不仅省掉多次握手消耗,节省带宽资源,而且不用多次去询问是否有新数据可消耗。

存在的问题

  • 需要服务端配合,学习成本高些

  • 如果需要获取新数据的频次少,一直保持链接的话,浪费服务器资源。

使用方式(ps: 我使用的是本地nginx,自己生成的证书,密钥)

技术方案:nodejs + nginx + 微信小程序

hosts文件配置:

127.0.0.1 localhost
127.0.0.1 www.test.com
 

服务端:

var express = require('express');
var ws = require('ws');
const http = require('http'); 
var server = http.createServer(express()); 

/**
 * 创建websocket服务
 */
const wss = new ws.createServer({ server, path: '/wss' }, ws => {
  serveMessage(ws);
});

/**
 * 监听websocket服务错误
 */
wss.on('error', (err) => {
  console.log(err);
});

/**
 * 进行简单的 WebSocket 服务,对于客户端发来的所有消息都回复回去
 */
function serveMessage(ws) {
  // 监听客户端发来的消息
  ws.on('message', (message) => {
console.log(`WebSocket received: ${message}`);
ws.send(`Server: Received(${message})`);
  });

  // 监听关闭事件
  ws.on('close', (code, message) => {
console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);
  });

  // 连接后马上发送成功响应
  ws.send(`Server: 收到我的消息了嘛`);
}

server.listen(8888);

nginx配置(ps: 如果只是调试的话也可以使用80端口):

server {
    server_name www.test.com;
    listen 443;
    ssl on;
    ssl_certificate      xxx.crt; # 证书
    ssl_certificate_key  yyy.key; # 密钥,生成方式可自行搜索

    access_log   /usr/local/etc/nginx/access.log; # 记录访问日志
    error_log   /usr/local/etc/nginx/error.log; # 记录错误日志

    proxy_read_timeout 10s; #设置超时时间,防止node服务就是挂的
    proxy_connect_timeout 5s; #设置超时时间,防止node服务就是挂的

    location /wss {
        proxy_pass http://localhost:8888;
        proxy_http_version 1.1; # 必需
        proxy_set_header Upgrade $http_upgrade; # 必需
        proxy_set_header Connection $connection_upgrade; # 必需
        proxy_set_header Host $host; # 非必需
        proxy_set_header X-Real-IP $remote_addr; # 非必需
        proxy_set_header X-Real-Port $remote_port; # 非必需
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 非必需
        proxy_set_header X-Forwarded-Protocol "$scheme"; # 非必需
    }
    
    location / {
        proxy_pass http://localhost:999;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Protocol $scheme;
        }
}

小程序客户端(ps: 具体使用语法可以查看mp.weixin.qq.com官方小程序文档):

wx.connectSocket({
  url: 'wss://www.test.com/wss',
  data: {
    message: 'test'
  },
  success: function (res) {
    console.log('成功了', res);
  },
  fail: function () {
    console.log('失败了');
  }
});
wx.onSocketOpen(function (res) {
  //balabala,可以向服务端发消息了
}
wx.onSocketMessage(function(data) {
  //接收到服务端消息,balabala
}
wx.onSocketError(function (res) {
  //socket错误,balabala
}

遇到的问题

  • websocket 客户端自动关掉链接:原因是长时间不和websocket服务端交流,超过了nginx设置的proxy_read_timeout时间就自动关闭了,如果想长时间链接,可以采用setTimeout等类似工具判断断了重链。

  • upstream prematurely closed connection while reading response header from upstream, client: 127.0.0.1, server:...: 如果nginx确保没错,多半是websocket server的原因,比如我的,解决方法就是把node中socket.io模块换成了ws模块。

相关文章:

  • CCF201703试题
  • 2017-09-12 前端日报
  • 看似“触手可及”的Oculus离我们有多远?
  • 【小工具】python 在服务器上临时启用一个端口
  • ARM-Linux中断系统
  • 马云:不利用互联网技术,比缺电更可怕
  • 微信JS-SDK实现上传图片功能
  • ES6--对象的扩展
  • 毕业随想(转载)
  • 7.06 生成累计和
  • 算法与数据结构(七) 图论
  • 中国人民公安大学(PPSUC) 网络对抗技术作业
  • ibatis中使用缓存
  • ElasticSearch 相关性
  • 简介
  • @angular/forms 源码解析之双向绑定
  • 【腾讯Bugly干货分享】从0到1打造直播 App
  • conda常用的命令
  • express.js的介绍及使用
  • Fastjson的基本使用方法大全
  • Go 语言编译器的 //go: 详解
  • JavaScript设计模式与开发实践系列之策略模式
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • Laravel 实践之路: 数据库迁移与数据填充
  • LeetCode算法系列_0891_子序列宽度之和
  • Mithril.js 入门介绍
  • react 代码优化(一) ——事件处理
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架
  • Zsh 开发指南(第十四篇 文件读写)
  • 从@property说起(二)当我们写下@property (nonatomic, weak) id obj时,我们究竟写了什么...
  • 从零开始学习部署
  • 订阅Forge Viewer所有的事件
  • 好的网址,关于.net 4.0 ,vs 2010
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 如何抓住下一波零售风口?看RPA玩转零售自动化
  • 数据科学 第 3 章 11 字符串处理
  • 腾讯大梁:DevOps最后一棒,有效构建海量运营的持续反馈能力
  • 提醒我喝水chrome插件开发指南
  • 问题之ssh中Host key verification failed的解决
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 栈实现走出迷宫(C++)
  • 找一份好的前端工作,起点很重要
  • ionic入门之数据绑定显示-1
  • PostgreSQL之连接数修改
  • Python 之网络式编程
  • ​无人机石油管道巡检方案新亮点:灵活准确又高效
  • ​中南建设2022年半年报“韧”字当头,经营性现金流持续为正​
  • # Maven错误Error executing Maven
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • (Java岗)秋招打卡!一本学历拿下美团、阿里、快手、米哈游offer
  • (二)基于wpr_simulation 的Ros机器人运动控制,gazebo仿真
  • (二十四)Flask之flask-session组件
  • (附源码)springboot建达集团公司平台 毕业设计 141538
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366