socket.io技術學習記錄

1、服務端

var express = require('express');
var app = require('express')();
var http = require('http').Server(app); //創建服務器

//在相應的服務器上創建通訊，固然，http服務器也能夠，獲取方法有差別
var io = require('socket.io')(http);
io.on('connection', function(socket){
    console.log('a user connected');
    socket.on('disconnect', function(){
        console.log('user disconnected');
    });
    //獲取數據
    socket.on('score', function(score){
        var data = score.split('&');
        var upuserid = data[0].split('=')[1];
        var upscore = parseInt(data[1].split('=')[1]);
        for(var i in user) {
            if(user[i].userid == upuserid) {
                user[i].score = Math.max(upscore,user[i].score);
                Update(mysql, upuserid, Math.max(upscore,user[i].score));
                break;
            }
        }
        for(var i = user.length - 1; i > 0; i --) {
            if(user[i].score > user[i-1].score) {
                var tmp = user[i];
                user[i] = user[i-1];
                user[i-1] = tmp;
            }
        }
        //發送數據
        io.emit('userlist2', user);
    });
});

2、客戶端

//一啓動就開啓，實時讀取數據
socket.on('userlist2', function(msg){
    userlist = msg;
    console.log(userlist[0]);
    (function($){
        var text = "<table>\n" +
            "        <thead>\n" +
            "            <tr>\n" +
            "                <th width=\"50%\">用戶</th>\n" +
            "                <th width=\"50%\">分數</th>\n" +
            "            </tr>\n" +
            "        </thead>\n" +
            "        <tbody id=\"userscore\">\n" +
            "        </tbody>\n" +
            "    </table>";
        document.getElementById("scorelist").innerHTML = text;
        var $tbody = $("#userscore");
        document.getElementById("userscore").innerHTML = "";
        for ( var i in userlist) {
            var $item = $("<tr><td>"+userlist[i].userid+"</td><td>"+userlist[i].score+"</td></tr>");
            if(userlist[i].userid == userid) {
                $item = $("<tr style='background: rgba(255,0,0,0.3);'><td>"+userlist[i].userid+"</td><td>"+userlist[i].score+"</td></tr>");
            }
            $tbody.append($item);
        }
    })(jq172);
});