websocket实现在HTTP连接的基础上，并通过HTTP中的Upgrade协议头将连接从HTTP升级到Websocket。这样就可以实现多次双向通讯，直到连接被关闭。小菜推荐有兴趣的小伙伴去看下这篇博客
1.nginx代理webscocket
nginx代理webscocket和代理一般服务请求一样，就是在客户端和服务器做一个转发。
2.websocket代理配置
演示websocket配置服务器端用nodejs，因为node环境很容易安装，测试也很简单。这里主要是演示nginx下如何配置websocket代理。
安装node环境
安装node环境具体请查nodejs 安装教程
安装yarn
安装yarn，具体查看官方文档yarn 安装
添加websocket库，cd /opt/app/websocket
演示服务目录
/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></p>
</div>
<div :class="[mes.type]" v-else>
<p></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端口服务
运行
在浏览器上输入域名访问http://www.walidream.com,下面是小菜配置好的demo
