socket学习笔记

发表于   |   分类于   |  

socket实现微型聊天室

用法

$ npm install socket.io

首先要先安装nodeJS

客户端：

<script src="/socket.io.js"></script>
var socket = io('你的网络地址以及端口号');//如：http://10.80.13.200:3002

socket.emit('msg',{data:value,time:shijian});//向服务器发送
socket.on('back',function(data){
    <!--接收服务器响应信息，这里写接收信息后的处理代码-->
});
注意：服务器端接受的事件名要和客户端发送的事件名一致，反过来同理！

服务器端：

var http = require('http);
var fs = require('fs); //文件系统
var server = http.creaServer(handle).lestin(3002);
var io = require('socket.io)(server);

function handle(req,res){
    fs.readFile(__dirname+'/index.html','utf-8',funtion(err,data){
        if(err){
            res.writeHead(500);
            res.end("出错啦！");
        }
        res.writeHead(200);
        res.end(data);
    })
}

<!--用户进入后执行的回调函数-->
io.on("connection",function(socket){
    socket.emit('back',{message:"success"});
    socket.on('msg',function(data){
        console.log(data);//数据处理代码
    });
})

简易聊天室 完整代码

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>聊天室</title>
        <link rel="stylesheet" href="../css/index.css">
        <script src="socket.io/socket.io.js"></script>
    </head>
    <body>
        <div class="box">
            <p>欢迎留言！  在线人数<span>0</span></p>
            <ul>

            </ul>
            <form action="">
                <input type="text">
                <input type="button" value="发送">
            </form>
        </div>
    </body>
    <script src="../js/index.js"></script>
</html>

index.css

*{
    padding:0;
    margin:0;
}
ul,li{
    list-style: none;
}
.box{
    width:600px;
    padding:10px 30px;
    margin:0 auto;
}
p{
    height:50px;
    line-height:50px;
    padding-left:20px;
    background: gray;
    }
ul{
    width:600px;
    min-height:400px;
    max-height: 500px;
    overflow: scroll;
    background: lightblue;
}
li{
    height:30px;
    line-height:30px;
    padding: 0px 20px;
}
li a{
    float: right;
}
body{
    background: lightgray;
}
[type="text"]{
    width:400px;
    height:30px;
    border:1px solid lightblue;
}
[type="button"]{
    margin-left:50px;
    width:80px;
    height:30px;
    background: gray;
    color: lightgreen;
    border:none;
}

index.js

var socket = io('http://10.80.13.200:3002');
var btn = document.querySelector("[type='button']");
var span = document.querySelector("span");
var chat = document.querySelector("ul");
var content = document.querySelector("[type='text']");
var dataM = [];

btn.onclick = function (event) {

    console.log(chat.scrollTop,chat.scrollHeight);
    //去掉默认事件
    event.preventDefault();
    if(content.value != '') {
        var date = new Date();
        var shijian = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();

        socket.emit('message',{data:content.value,timee:shijian});
        }
        chat.scrollTop = chat.scrollHeight-20;
    }

    socket.on('back',function (data) {
        chat.innerHTML = '';
        for(var i = 0;i<data.data.length;i++){
        dataM[i] = data.data[i];
        var li = document.createElement('li');
        var a = document.createElement('a');
        li.innerHTML = data.data[i].data;
        a.href = "#";
        a.innerHTML = data.data[i].timee;
        li.appendChild(a);
        chat.appendChild(li);
    }
    span.innerHTML = data.num;
});

server.js

var http = require('http');
var fs = require('fs');
var mime = require('mime');
var server = http.createServer(handle);
//绑定服务器
var io = require('socket.io')(server);
function handle(req,res) {
    var filePath = '';
    if(req.url == '/'){
        filePath = './html/index.html';
    }else{
        filePath = '.'+req.url;
    }
    exit(filePath,res);
}
function exit(filePath,res) {
    fs.exists(filePath,function (exits) {
        if(exits){
            fs.readFile(filePath,'utf-8',function (err,data) {
                if(err){
                    goTo404(res);
                }
                res.end(data);
            })
        }else {
            goTo404(res);
        }
    })
}
function goTo404(res) {
    res.writeHead(404,{
        "content-type":"text/plain"
    })
    res.end("404!   Sorry! no such file!");
}
server.listen(3002,function () {
    console.log('OK');
});
var num = 0;
//用户连接，回调
io.on('connection',function (socket) {
    //emit,事件名，发射主体
    //on,事件名，接收信息，(服务端和客户端一一对应)
    socket.on('message',function (data) {
        fs.readFile('./tsconfig.json',function (err,dat) {
            if(err){
                goTo404(res);
            }
            var shuju = JSON.parse(dat);
            shuju.data.push(data)
            fs.writeFile('./tsconfig.json',JSON.stringify(shuju),function (err) {
                if(err){
                    goTo404(res);
                }
                read();
            })
        })
        num++;
    })
function read() {
    fs.readFile('./tsconfig.json','utf-8',function (err,dat) {
        if(err){
            goTo404(res);
        }
        var shu1 = JSON.parse(dat).data;
        io.sockets.emit('back',{data:shu1,num:JSON.parse(dat).data.length});
    })
}
    read();
});

文件路径

Mou icon

参考网站：

http://socket.io/docs/,

nodeJS之fs模块http://www.jianshu.com/p/5683c8a93511

^-^刚开始学习，写的比较low ^-^