nginx - WebSocket

最新推荐文章于 2024-06-07 21:15:00 发布
最新推荐文章于 2024-06-07 21:15:00 发布
阅读量915 收藏 1
点赞数 1
分类专栏： 分布式#nginx 文章标签： nginx linux websocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15351029/article/details/111225760
版权

nginx - WebSocket

因为工作涉及到使用nginx代理webSocket在加上最近本来就计划系统的学习一下nginx。正好先行一波。

随后会进行系统学习。

nginx linux安装

下载地址：http://nginx.org/en/download.html

window和linux版本自己选择

这里只写linux安装的笔记，下载安装包后上传至虚机或者服务器,也可以使用wget命令。

我下载的是稳定版本 1.18.0

## 解压
> tar -zxvf nginx-1.18.0.tar.gz
# 删除压缩包
> rm nginx-1.18.0.tar.gz
# 检查是否已经安装相关依赖
> yum list installed | grep "gcc"
> yum list installed | grep "pcre-devel"
> yum list installed | grep "zlib-devel"
> yum list installed | grep "openssl"
> yum list installed | grep "openssl-devel"
# 对未安装的进行安装  如果没全选需要使用su 
# yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
> yum -y install pcre-devel
# 再次检查安装依赖
> yum list installed | grep "pcre-devel"
#进入nginx目录
> cd nginx-1.18.0
# 配置
> ./configure --prefix=/usr/local/nginx
# make
> make
> make install
# 在 nignx目录下创建 logs目录并授权
> mkdir logs
> chmod 700 logs

# 启动nignx
# 切换到安装目录
> cd /usr/local/nginx
# 检查配置文件是否正确
> ./sbin/nginx -t
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
# 启动nginx
> ./sbin/nginx -c /usr/local/nginx/conf/nginx.conf

# 测试链接 但是访问很遗憾访问失败了
# 检查端口开放情况 nginx默认是80端口 这里要看下centos版本，6.x和7.x命令可能不一样
# 查看centos版本命令 cat /etc/redhat-release
# 处理端口这比较乱要各种尝试，这里不写了以后需要了在进行总结吧

# 查看进程
> ps -ef |grep nginx
root      5973     1  0 10:12 ?        00:00:00 nginx: master process ./sbin/nginx -c /usr/local/nginx/conf/nginx.conf
nobody    5974  5973  0 10:12 ?        00:00:00 nginx: worker process

代理webSocket

其实这部分官网写的很明白

参考地址： http://nginx.org/en/docs/http/websocket.html

这里我直接把我们的配置文件贴出来。

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    keepalive_timeout  65;

	# 定义变量 
	map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }
       
    upstream websocket {
        server 127.0.0.1:8445;
    }
      
    server {
        listen       80;
        server_name  localhost;

        location / {
            root   html;
            index  index.html index.htm;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }           
    }
   
    server {
		# 监听端口
        listen       2345;
		# 地址
        server_name  10.1.109.202;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
		
		location /ws {
           proxy_pass http://10.1.109.202:8445/ ;
		   
		   # 设置链接持续时间
		   proxy_read_timeout 300s;		   		  
		   
		   proxy_set_header Host $host;
 		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			
		   # 设置为webSocket
		   proxy_http_version 1.1;
		   proxy_set_header Upgrade $http_upgrade;
		   proxy_set_header Connection $connection_upgrade;
        }
			
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

页面调用代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
            //var socketUrl="${request.contextPath}/wxCustomerService/"+$("#userId").val();
            // var socketUrl="http://10.11.32.153:8445/"+$("#userId").val();
            var socketUrl="http://10.1.109.202:2345/"+$("#userId").val();
            // var socketUrl="http://www.sinosafe.websocket/ws/"+$("#userId").val();
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            /* 
			socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
			*/
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
			
			// 接收服务端数据时触发事件
			socket.onmessage = function (evt) {
			   var received_msg = evt.data;
			   var bcy = typeof(received_msg);
			   console.log(received_msg);
			   console.log(bcy);			 
			};
			
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            
            // socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send(JSON.stringify(getParam()));
        }
    }

    function getParam(){
        var data = {	
            "receiver":$("#toUserId").val(),
            "openId":$("#toUserId").val(),
            "messageType":"message",
            "optType":"",
            "clientType":"cusService",
            "sender":$("#userId").val(),                        
            "message":$("#contentText").val(),
            "senderName":"jimmy-001",
            "contentType":"text",            
            "scene":"1"            
        } 

        return data;
    }

</script>
<body>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="jimmy"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="10"></div>
<p>【消息】：<div><input id="contentText" name="contentText" type="text" value="hello jimmy websocket"></div>
<p>【操作】：<div><input type="button" onclick="openSocket()">开启socket</input></div>
<p>【操作】：<div><input type="button" onclick="sendMessage()">发送消息</input></div>
</body>

</html>

2020年12月16日
补充如果涉及到Https，可以参考官网

http://nginx.org/en/docs/http/configuring_https_servers.html

需要在server中增加

server_name         www.example.com;
ssl_certificate     www.example.com.crt;
ssl_certificate_key www.example.com.key;
ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers         HIGH:!aNULL:!MD5;

另外前端访问的时候使用 wss来访问即可

非鸽传书
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Nginx-1.23.2.zip
05-16
- **新功能**：可能添加了新的配置选项或模块，以支持更多功能或新技术，如HTTP/2、WebSocket等。 - **兼容性改进**：可能提升了与不同操作系统或后端应用的兼容性。 - **错误修复**：解决了上一版本中发现的问题，...
fig-nginx-websocket-reverse-proxy
05-17
自述文件入门使用CLI [0]$ fig up[1]$ node sub.js[2]$ node pub.js使用浏览器 [0]$ fig up[1]$ make open[1]$ make open您可以在两个标签之间聊天：)
nginx的websocket的配置
weixin_46406282的博客
11-09 1551
Nginx 支持websocket的配置 server { listen 80; server_name 域名; location / { proxy_pass http://127.0.0.1:8080/; // 代理转发地址 　　　　proxy_http_version 1.1; proxy_read_timeout 3600s; // 超时设置 // 启用支持websocket连接 proxy_set_header Upgrade $http_upgrade; proxy_set_head
Nginx配置WebSocket（WS）和WebSocket Secure（WSS）的完整指南
热门推荐
曲江涛的博客
05-18 1万+
WebSocket是一种现代化的通信协议，它通过单个TCP连接实现全双工通信。相比传统的HTTP请求，WebSocket提供了更低的延迟和更高的实时性。Nginx通过支持WebSocket和WebSocket Secure，使得您可以将这些功能集成到您的Web应用程序中。WebSocket提供了实时双向通信的能力，而WebSocket Secure通过SSL加密保障了通信的安全性。使用Nginx作为反向代理服务器，您可以轻松地将WebSocket请求转发到后端服务器，并且能够处理大量并发连接。
nginx配置WebSocket参数wss连接
最新发布
Good Luck
06-07 729
2、在default.conf中配置。
nginx配置websocket支持（官方版）
rwjxiaoyue的专栏
02-03 4032
用官网推荐方法配置nginx对websocket支持，经过实际验证
配置Nginx作为WebSocket代理
高性价比服务器就选：蓝易云
08-03 1317
配置Nginx作为WebSocket代理是一种常见的设置，以便在Nginx服务器上实现WebSocket连接的转发和负载均衡。首先，确保已在服务器上安装了Nginx。你可以根据你的操作系统类型，参考Nginx官方文档进行安装步骤。根据你的实际需求和环境，可能需要进行其他的Nginx配置调整。替换为实际的WebSocket后端服务器的地址。你可以添加更多的后端服务器作为负载均衡。来连接到WebSocket服务器，并使用Nginx作为中间代理。现在，Nginx已配置为WebSocket代理。
Nginx Websocket 配置
cr7258的博客
03-25 1627
Websocket 简介 WebSocket 是一种基于 TCP 连接的全双工通信的协议，其工作在应用层，建立连接的时候通过复用 Http 握手通道，完成 Http 协议的切换升级，即切换到 WebSocket 协议，协议切换成功后，将不再需要客户端发起请求，服务端就可以直接主动向客户端发送数据，实现双向通信。 和 Http 相比，WebSocket有以下优点: WebSocket 是双向通信协议，可以双向发送或接受信息。HTTP是单向的，只能由客户端发起请求时，服务器才能响应，服务器不能主动向客户端发送
nginx-ws:NGINX + Websocket ping演示
03-13
如果未从应用程序服务器发送ping，则NGINX会杀死Websocket连接的演示。 为创建入门确保您已经安装了Docker，Go和一些websocket客户端（我使用 ）。 在端口8081上运行Go websocket服务器： go run main.go 然后，在...
nginx-1.21.6.zip和nginx-1.21.6.tar.gz
05-25
1.21.6版本可能包含了一些修复的bug、安全更新以及对HTTP/2协议、WebSocket支持等方面的改进。具体改动需参考官方发布日志，以获取详细信息。 2. ZIP与TGZ格式的区别 - ZIP是通用的文件压缩格式，适合在Windows...
Nginx转发WebSocket接口配置方式
02-27
3. **处理WebSocket标识符**：WebSocket连接中，每个连接都有一个唯一的`Sec-WebSocket-Key`和`Sec-WebSocket-Accept`头，Nginx会自动处理这些头，无需额外配置。 4. **代理缓冲区**：根据实际需求，可能需要调整...
记录一次nginx+Websocket反向代理时报错504-gateway TimeOut和各种开发遇到的坑(wss链接404、ws链接400 bad Requset等等)
good_good_xiu的博客
10-26 4897
1、场景 需要反向代理转发websocket链接。 2、问题原因 1、nginx路径未匹配上 2、链接上后，在默认的http链接时长中没有发送心跳包，nginx自动关闭http链接，一般默认为1分钟 3、http链接转发后并没有升级为websockt链接（Bad Request 400错误） 3、解决方法 1、路径未匹配 检查nginx路径配置，如下配置： 正确匹配地址：ws://localhost:8080/websocket/xxx 如果是location /websocket {…} ws://loc
Nginx 配置 WebSocket 代理
枫飘长安的博客
03-31 3259
Nginx 配置 WebSocket 代理
Nginx支持Websocket的配置
Frank_ZZ_的博客
11-23 565
$ vim /usr/local/nginx/conf/nginx.conf # 在http上下文中增加如下配置，确保Nginx能处理正常http请求。 http{ map $http_upgrade $connection_upgrade { default upgrade; '' close; } upstream websocket { server 127.0....
Nginx输出日志信息
Loser_you的博客
02-02 882
Nginx输出日志信息 log_format main escape=json '{ "@timestamp": "$time_iso8601", ' '"remote_addr": "$remote_addr",' '"costime": "$request_time",' '"realtime": "$u
socket的Nginx的配置
duancsdn的博客
01-29 1027
stream{server{
nginx请求转发webSocket
前方的路在刚开始
12-09 9364
原由1.我有一个socket服务，用ip访问是成功的，但是老板说用这个不行，要用nginx请求转发，转发内网地址到某个域名2.但是我改成了指定域名后失败，
nginx配置https，重定向后https变成了http
Hang的博客
04-23 1806
server { listen 443; #配置HTTPS的默认访问端口为443。 #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。 #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。 server_name yourdomain.com; #需要将yourdomain.com替换成证书绑定的域名。 ssl on; index index.html in.
nginx配置websocket
czx2018的博客
06-29 2931
nginx如何支持websocket WebSocket 和HTTP虽然是不同协议，但是两者“握手”方式兼容。通过HTTP升级机制，使用HTTP的Upgrade和Connection协议头的方式可以将连接从HTTP升级为WebSocket。如下图所示 因为WebSocket协议是一个hop-by-hop协议（此类头部字段只对单次转发有效。会因为转发给缓存/代理服务器而失效），为了让Nginx代理服务器可以将来自客户端的Upgrade请求发送到后端服务器，要求Upgrade和Connection的头信息必须
nginx 配置websocket
06-08
配置 Nginx 支持 WebSocket 需要修改 Nginx 的配置文件，以下是配置 WebSocket 的步骤： 1. 打开 Nginx 配置文件 使用以下命令打开 Nginx 的配置文件： ``` sudo vi /usr/local/nginx/conf/nginx.conf ``` 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值