20161008学习笔记及总结

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);
});

浏览器端###

核心代码如下：

    

        
多人实时在线聊天系统
    

    


    

    

        

            

                

                    
                

                

                    发送
                
            
        
    

操作截图###

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

引用说明###

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