socket.io
Node.js中使用socket的一个包。使用它可以很方便地建立服务器到客户端的sockets连接，发送事件与接收特定事件。
- 通过npm进行安装 npm install socket.io 。
- 安装后在node_modules文件夹下新生成了一个socket.io文件夹，其中我们可以找到一个socket.io.js文件。将它引入到HTML页面，这样我们就可以在前端使用socket.io与服务器进行通信了。
<script src="/lib/socket.io/socket.io.js"></script> - 同时服务器端的server.js里跟使用express一样，也要通过
require('socket.io')将其引入到项目中，这样就可以在服务器端使用socket.io了。
需要前后端都引入socket.io - 原理，服务器保存好所有的 Client->Server 的 Socket 连接，Client A 发送消息给 Client B 的实质是：Client A -> Server -> Client B。
即 Client A 发送类似 {from:'Client A', to:'Client B', body: 'hello'} 的数据给 Server。Server 接收数据根据 to值找到 Client B 的 Socket 连接并将消息转发给 Client B
socket.io的使用
- 使用socket.io，其前后端句法是一致的，即通过socket.emit()来激发一个事件，通过socket.on()来侦听和处理对应事件。这两个事件通过传递的参数进行通信。
自己聊天页面的实现
页面框架的实现
image.png
image.png
socket.io实现两个在线的人聊天
建立用户表的数据结构
var userSchema = new Schema({
username: String,
password: String,
phone: String,
friend:[]
});
建立friend表
var friendSchema = new Schema({
friendID:String
});
建立message表
var msgSchema = new Schema({
friendID:String,
usrID:String,
content:String,
status:Number
});
添加用户登录，如果用户登录的话，把该用户加入到在线的user中去
在bin>www里面添加代码
var io = require('socket.io').listen(server);
var users=[];
io.on('connection', function(socket) {
socket.on('login', function(usrName) {
if (users.indexOf(usrName) > -1) {
console.log("user existed");
} else {
socket.userIndex = users.length;
socket.username = usrName;
users.push(usrName);
console.log(usrName);
io.sockets.emit('system', usrName); //向所有连接到服务器的客户端发送当前登陆用户的昵称
};
});
socket.on('chat message', function(msg){
socket.broadcast.emit('newMsg', socket.username, msg);
});
在前端public>js>chatList.js添加代码用来添加显示对话
function init() {
var socket = io();
$('#loginBtn').click(function (){
var username = $.cookie('username');
socket.emit('login', username);
});
$('.inputMsg').submit(function () {
var msg=$('#messageInput').val();
$('#messageInput').val('');
socket.emit('chat message',msg);
displayNewMsg('me', msg);
return false;
});
socket.on('newMsg', function(user, msg) {
displayNewMsg(user, msg);
});
}
//用来判断是自己的消息还是别人的消息
function displayNewMsg(user, msg) {
var itemArr = [];
itemArr.push('<li class="'+(user === "me" ? "me" : "other")+'">');
itemArr.push('<div class="time">');
itemArr.push('<span>time</span>');
itemArr.push('</div>');
itemArr.push('<div class="msg">');
itemArr.push('<img src="/images/2.jpg" class="img-rounded">');
itemArr.push('<p>'+msg+'</p>');
itemArr.push('</div>');
itemArr.push('</li>');
$('.historyMsg ul').append(itemArr.join(''));
}
image.png
