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的问题吗？
