2022-05-26

EMQX搭建对接WSS

小前端用了这么久WSS，还是头一次自己搭，折腾一下午才弄好，记录一下吧

后台服务用的是之前装的‘EMQX’，用于多端的Mqtt通信，这个就不多介绍了，安装方式见‘EMQX下载安装’

WS

要用websocket的话比较简单，因为EMQX提供的有ws端口，默认的8083端口，可以通过配置文件修改，改成0.0.0.0:8083，支持外部访问，并且服务器安全组要开放8083端口

这里要提一点就是有时候修改配置文件restart不生效，后台查了一下发现是emqx有个守护进程需要关掉，正确姿势就是先stop，然后ps -aux | grep emq找到守护进程kill掉，再start启动

前端使用的是‘MQTT’ ，因为是老项目，发现最近版本有不兼容的语法，于是找了个使用最多的老版本npm i mqtt@2.18.8 --save

import { connect } from 'mqtt'

// 建立连接
const client = connect('ws://xxx.com:8083/mqtt', {
  username,
  password
})

// 连接成功后订阅topic
client.on('connect', () => {
  client.subscribe(['presence'])
})

// 接收消息
client.on('message', function (topic, message) {
  switch (topic) {
    case 'presence':
      console.log(message.toString());
      break;
  }
})

本来到这里就以为可以愉快的结束了，部署上线之后才想起来ssl，含泪上WSS

WSS

我干的第一件事是百度了一下WSS跟https的ssl证书是用同一个，省了点事

跟上面一样，先改下WSS的8084端口，支持外部访问

然后改一下emqx配置文件，把证书配上，因为不知道是哪个所以都改了

## Path to the file containing the user's private PEM-encoded key.
##
## See: http://erlang.org/doc/man/ssl.html
##
## Value: File
listener.ssl.external.keyfile = your certfile.key

## Path to a file containing the user certificate.
##
## See: http://erlang.org/doc/man/ssl.html
##
## Value: File
listener.ssl.external.certfile = your certfile.pem

## Path to the file containing the user's private PEM-encoded key.
##
## See: listener.ssl.<name>.keyfile
##
## Value: File
listener.wss.external.keyfile = your certfile.key

## Path to a file containing the user certificate.
##
## See: listener.ssl.<name>.certfile
##
## Value: File
listener.wss.external.certfile = your certfile.pem

需要确保emqx是有访问权限的

然后是nginx的配置，一种方法是反向代理，如果不想把端口暴露给外部，可以配置一下代理到内部8084端口，我是单独写了个配置文件把wss端口给出来了

server {
    listen 8084 ssl;
    server_name server.com;
    
    ssl_certificate your certfile.pem;
    ssl_certificate_key your certfile.key;

    location /mqtt {
        proxy_redirect off;
        proxy_pass http://server.com:8084;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_connect_timeout 1800s;
        proxy_send_timeout 1800s;
        proxy_read_timeout 1800s;
    }
}

前端对接

import { connect } from 'mqtt'

// 建立连接
const client  = connect('wss://xxx.com:8084/mqtt', {
  username,
  password
})

完结撒花

本文标题:EMQX搭建对接WSS

文章作者:Li Yu

发布时间:2022-05-26, 20:12:45

最后更新:2022-05-27, 11:24:33

原始链接:https://www.liyu.fun/2022/05/26/emqx-wss/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。