20161008学习笔记及总结#

知识点概要##

TCP/IP协议
长连接、短连接
全双工和半双工

=> nodejs中回调函数的写法

(sockent)=>{} 等同于 function(socket){}

socket.io 引入模块、调用方法

作业##

使用socket实现一个基于终端的和基于浏览器的实时聊天功能

作业总结##

服务端###

安装express框架后，找到bin/www.js文件：

var server = http.createServer(app);

//begin
//socket server created by liutao
var io = require('socket.io')(server);

//保存客户端
var connectionList = {};

io.on('connection', function (socket) {

    //客户端连接时，保存socketId和用户名
    var socketId = socket.id;
    connectionList[socketId] = {
        socket: socket
    };

    //用户进入聊天室事件，向其他在线用户广播其用户名
    socket.on('join', function (data) {
        console.log(data.username + ' 进入了聊天室');
        socket.broadcast.emit('broadcast_join', data);
        connectionList[socketId].username = data.username;
    });

    //用户离开聊天室事件，向其他在线用户广播其离开
    socket.on('disconnect', function () {
        if (connectionList[socketId].username) {
            socket.broadcast.emit('broadcast_quit', {
                username: connectionList[socketId].username
            });
        }
        console.log(connectionList[socketId].username + ' 离开了聊天室');
        delete connectionList[socketId];
    });

    //用户发言事件，向其他在线用户广播其发言内容
    socket.on('say', function (data) {
        socket.broadcast.emit('broadcast_say', {
            username: connectionList[socketId].username,
            text: data.text
        });
        console.log(connectionList[socketId].username + ' 说 : '+data.text);
        console.log();
    });
});
//end

客户端###

创建client.js文件：

var io = require('socket.io-client');
var socket = io.connect('http://localhost:3000', {reconnect: true});

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});
var clientUsername = '';

rl.question('请输入你的姓名:\r\n(系统会在您输入的姓名前加上terminal_以示区分) ', (username) => {
    clientUsername = 'terminal_' + username;

    // 连接服务器
    socket.on('connect', function (socket) {
        console.log('您已成功连接至服务器');
    });

    //连接服务器完毕后，马上提交一个“加入”事件，把自己的用户名告诉别人
    socket.emit('join', {
        username: clientUsername
    });
    rl.on('line', (input) => {
        //发送消息
        socket.emit('say', {
            username: clientUsername,
            text: input
        });
    });
});


//收到加入聊天室广播后，显示消息
socket.on('broadcast_join', function (data) {
    console.log(data.username + ' 加入了聊天室');
});

//收到离开聊天室广播后，显示消息
socket.on('broadcast_quit', function (data) {
    console.log(data.username + ' 离开了聊天室');
});

//收到别人发送的消息后，显示消息
socket.on('broadcast_say', function (data) {
    console.log(data.username + ' 说: ' + data.text);
});

浏览器端###

核心代码如下：

<div id="" data-role="page">
    <header data-role="header" data-theme="b" data-type="horizontal">
        <h1>多人实时在线聊天系统</h1>
    </header>

    <div data-role="content" id="comment_list">

    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li style="width:83%;">
                    <input type="text" id="message" value="" placeholder="系统已自动检测回车事件，您可以按回车键发送信息"/>
                </li>

                <li style="width:15%; float: right;" id="sendMessage">
                    <a href="#" style="background: #ffb03f;color:white;font-size:12px;" data-icon="check">发送</a>
                </li>
            </ul>
        </div>
    </div>

</div>

<script src="/javascripts/socket.io.js"></script>

<script>

    var username = prompt("请输入您的姓名。系统会在您输入的姓名前加上broswer_以示区分", "");
    //    var username = 'a';
    var clientUsername = 'broswer_' + username;

    var socket = io();

    // 连接服务器
    socket.on('connect', function (socket) {
        console.log('您已成功连接至服务器');
        $('#comment_list').append('  <label class="text_center"> <span class="tip"> 您已进入聊天室</span> </label>  ');

    });

    //连接服务器完毕后，马上提交一个“加入”事件，把自己的用户名告诉别人
    socket.emit('join', {
        username: clientUsername
    });

    //收到加入聊天室广播后，显示消息
    socket.on('broadcast_join', function (data) {
        console.log(data.username + ' 加入了聊天室');
        $('#comment_list').append('  <label class="text_center"> <span class="tip"> ' + data.username + ' 加入了聊天室</span> </label>  ');
    });

    //收到离开聊天室广播后，显示消息
    socket.on('broadcast_quit', function (data) {
        console.log(data.username + ' 离开了聊天室');

        $('#comment_list').append('  <label class="text_center"> <span class="tip"> ' + data.username + ' 离开了聊天室</span> </label>  ');


    });

    //收到别人发送的消息后，显示消息
    socket.on('broadcast_say', function (data) {
        console.log(data.username + ' 说: ' + data.text);
        $('#comment_list').append('        <label> <p class="other_name">' + data.username + '</p> <span class="content">' + data.text + '</span> </label> ');

    });

    //检测回车事件
    $('#message').keyup(function (e) {
        if (e.keyCode == 13) {
            $('#sendMessage').click();
        }
    });

    $('#sendMessage').click(function (event) {
        event.preventDefault();

        var messageStr = $('#message').val()
        console.log(messageStr);

        socket.emit('say', {
            username: clientUsername,
            text: $('#message').val()
        });


        $('#message').val('');
        $('#comment_list').append(' <label class="text_right"> <p><span>' + messageStr + '</span></p></label>');
        return false;
    });

</script>

操作截图###

谁能告诉我，怎么上传截图啊。拖图片到编辑区，没反映；复制剪贴板中的图片，还是没反映……是浏览器firefox的问题吗？

引用说明###

本项目参考了 http://www.jb51.net/article/57090.htm