记录Nginx socketio踩下的坑

聊天代码

本文采用简单聊天记录踩下的坑。（服务端的代码和前端代码都是在github下载，不是本人自己写的）

socket.io 服务端

使用简单nodejs 作为配置，代码如下：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var clients = {}; 

app.get('/', function(req, res){
  res.send('server is running');
});

io.on("connection", function (client) {
    console.log("new client connected");
    io.emit("chat", clients[client.id], "hllo");
    client.on("join", function(name){
    	console.log("Joined: " + name);
        clients[client.id] = name;
        client.emit("update", "You have connected to the server.");
        client.broadcast.emit("update", name + " has joined the server.")
    });

    client.on("send", function(msg){
    	console.log("Message: " + msg);
        client.broadcast.emit("chat", clients[client.id], msg);
    });

    client.on("disconnect", function(){
    	console.log("Disconnect");
        io.emit("update", clients[client.id] + " has left the server.");
        delete clients[client.id];
    });
});


http.listen(3000, function(){
  console.log('listening on port 3000');
});

package.json 代码段如下：

  "name": "socketio-simple-chat",
  "version": "1.0.0",
  "description": "A simple NodeJS and Socket.io chat script",
  "main": "index.js",
  "author": "Daniel Campos <d.ericeira@hotmail.com>",
  "license": "MIT",
  "repository": {
    "url": "http://",
    "type": "git"
  },
  "dependencies": {
    "express": "^4.14.0",
    "i": "^0.3.5",
    "jquery": "^3.1.1",
    "npm": "^3.10.9",
    "socket.io-client": "^1.5.1",
    "socketio": "^1.0.0"
  }
}

js前端代码

$(document).ready(function(){  
    var socket = io.connect("http://localhost:8000/");
    var ready = false;

    $("#submit").submit(function(e) {
		e.preventDefault();
		$("#nick").fadeOut();
		$("#chat").fadeIn();
		var name = $("#nickname").val();
		var time = new Date();
		$("#name").html(name);
		$("#time").html('First login: ' + time.getHours() + ':' + time.getMinutes());

		ready = true;
		socket.emit("join", name);

	});

	$("#textarea").keypress(function(e){
        if(e.which == 13) {
        	var text = $("#textarea").val();
        	$("#textarea").val('');
        	var time = new Date();
					$(".chat").append('<li class="self"><div class="msg"><span>' + $("#nickname").val() + ':</span><p>' + text + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
					
					socket.emit("send", text);
					// automatically scroll down
					document.getElementById('bottom').scrollIntoView();
        }
    });


    socket.on("update", function(msg) {
    	if (ready) {
    		$('.chat').append('<li class="info">' + msg + '</li>')
    	}
    }); 

    socket.on("chat", function(client,msg) {
    	if (ready) {
				var time = new Date();
				$(".chat").append('<li class="field"><div class="msg"><span>' + client + ':</span><p>' + msg + '</p><time>' + time.getHours() + ':' + time.getMinutes() + '</time></div></li>');
				
    	}
    });
});

Nginx 配置

nginx 下载和其他配置 本文不再赘述，直接写上关键代码

server {
	listen       8000;
	server_name  localhost;

	#charset koi8-r;

	#access_log  logs/host.access.log  main;
		
	location / {
		root   html;
		index  index.html index.htm;
	}
	
	# 配置平常的websocket
	location /webapp/ {
		proxy_pass http://websocket_server;
		proxy_set_header Host $host; 
		proxy_set_header X-Real-IP $remote_addr; 
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}
	
	location /io {
		proxy_pass http://127.0.0.1:3000;
	}
	
	location /socket.io {
		proxy_pass http://socket.io.server;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
		proxy_set_header Host $host;
	}
	error_page   500 502 503 504  /50x.html;
	location = /50x.html {
		root   html;
	}
}

http {
#	配置关键代码
	map $http_upgrade $connection_upgrade {
		default upgrade;
		” close;
	}
}

备注： server和http 配置在不同的文件，nginx 多文件配置 不再累赘，感谢！！！