nginx websocket(16)

2019-01-21 本文已影响103人瓦力博客

获取全套nginx教程，请访问瓦力博客

websocket实现在HTTP连接的基础上，并通过HTTP中的Upgrade协议头将连接从HTTP升级到Websocket。这样就可以实现多次双向通讯，直到连接被关闭。小菜推荐有兴趣的小伙伴去看下这篇博客

阮一峰博客WebSocket 教程{:target="_blank"}

ssl

1.nginx代理webscocket

nginx代理webscocket和代理一般服务请求一样，就是在客户端和服务器做一个转发。

ssl

2.websocket代理配置

演示websocket配置服务器端用nodejs，因为node环境很容易安装，测试也很简单。这里主要是演示nginx下如何配置websocket代理。

安装node环境

安装node环境具体请查nodejs 安装教程{:target="_blank"}

安装yarn

安装yarn，具体查看官方文档yarn 安装{:target="_blank"}

添加websocket库，cd /opt/app/websocket

yarn add ws

演示服务目录

/opt/app/websocket
|-node_modules
|-package.json
|-server.js
|-yarn.lock

/opt/app/code
|-index.html

/etc/nginx/cond.f
|-websocket.conf

websocket目录下面只需要注意server.js文件，其他文件都是通过yarn add ws命令自动生成的。

server.js

server文件是在服务器启动一个服务，端口为8010

console.log("start NodeServer"); 
var msg = ""; 
var webSocketServer = require('ws').Server;
var wss = new webSocketServer({port:8010});

wss.on('connection',function(ws){
   ws.send('hello!');
   ws.on('message',function(message){
      console.log( message);
      ws.send(message);
   })  
})

index.html

这个demo是自己写的，样式没有分开，主要是做一个简单的演示界面。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title> 
    <style>
        *{
            margin:0;
            padding:0;
        }
        #app{
            margin:50px auto;
            width: 600px;
            border: 1px solid #000;
        }
        ul{
            height:500px;
            overflow: auto;
            list-style-type: none;
        }
        .receive{
            margin:5px 0;
            display: flex;          
            align-items: center;
            justify-contet: flex-start;
        }
        .send{
            margin:5px 0;
            display: flex;          
            align-items: center;
            justify-content: flex-end;
        }
        .s_avatar,.f_avatar{
            display:inline-block;
            width:50px;
            height:50px;
            line-height:50px;
            font-size:14px;
            text-align:center;
            color:#fff;
            background-color:#FF66FF;
            border-radius:50%;
        }
        .f_avatar{
            background-color:#199ED8;
        }
        p{
            background: #86DA51;
            height: 50px;
            line-height: 50px;
            border-radius: 19px;
            padding: 0 20px;
        }
        .input-box{
            margin:30px 0;
            display: flex;          
            justify-content: flex-start;
            align-items: center;
        }
        input{
            width:500px;
            height:50px;
        }
        button{
            width:100px;
            height:50px;
        }
    </style>
</head>
<body>


    <div id="app">
        <ul>
            <li v-for="mes in message">
                <div :class="[mes.type]" v-if="mes.type == 'receive'">
                     <span class="s_avatar">收</span><p>{{mes.value}}</p>
                </div>
                <div :class="[mes.type]" v-else>
                    <p>{{mes.value}}</p><span class="f_avatar">发</span>
                </div>
            </li>
        </ul>
        <div class="input-box">
            <input type="text" @keyup.enter="send" v-model="input">
            <button @click="send">发送</button>
        </div>
    </div>
    
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:function(){
            return {
                input:'',
                message:[],
                socket:null
            }
        },
        methods:{
            send(){
                let obj={'type':'send',value:this.input}
                this.message.push(obj);
                this.socket.send(this.input); 
            }
        },
        mounted(){
            let self = this;
            self.socket = new WebSocket('ws://walidream.com/websocket');
            self.socket.onopen = function () {
                console.log('开始连接!');                
            };
            self.socket.onmessage = function (event) {
                let obj={'type':'receive',value:event.data}
                self.message.push(obj);
                //socket.close();
            };
            self.socket.onclose = function () {
                console.log('关闭连接!');
            };
            self.socket.onerror = function () {
                console.log('关闭连接出错!');
            };
            
        }
    
    })
</script>

websocket.conf

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream websocket {
    server 127.0.0.1:8010;  #监听8010端口
}

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;

    location / {
        root /opt/app/code;
        index index.html;
    }

    location ~ ^/websocket {
        proxy_pass http://websocket;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;       
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

启动8010端口服务

cd /opt/app/websocket

运行

node ./server.js

在浏览器上输入域名访问http://www.walidream.com,下面是小菜配置好的demo

ssl