一、socket.io基础
首先来看一下官方例子-
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocket</title>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
</head>
<body>
<script>
var socket=io('ws://localhost:3000');
socket.on('news',function(data){
console.log(data);
socket.emit('my other event',{
my:'data'
})
})
</script>
</body>
</html>
node服务端代码如下:
var app=require('http').createServer();
var io=require('socket.io')(app);
app.listen(3000);
io.on('connection',function(socket){
socket.emit('news',{
hello:'word'
});
socket.on('my other event',function(data){
console.log(data)
})
});
启动服务之后,我们可以打开控制台:
客户端可以收到服务端发送过来的信息,;服务端也可收到客户端发送过来的信息,
。
可以通过最简单的socket.on()来接受我们的广播信息,第一个参数是接受定义的出发事件,第二个参数是接受参数的回调。这里出发的事件名称可以自己定义。socket.emit(),就是想链接的用户推送信息,也是接受两个参数,参数类型和socket.on()一模一样。我们客户端和服务端的通信,就是通过定义相同的出发事件来进行通信的。
在node服务端中。io.on('connection',function(socket){});这个语法是固定的,创建一个socket.io的链接,一下就是处理链接的逻辑。
这里有一篇文章对socket.io的常用API方法一下做简略介绍:
http://www.cnblogs.com/xiezhengcai/p/3956401.html
2、基于socket.io 搭建简单的聊天室程序
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webSocet</title>
<script src="../socket.io-1.4.5.js"></script>
</head>
<body>
<h1>Chat Room</h1>
<input type="text" id="sendTxt">
<button id="sendBtn">发送</button>
<script>
//建立连接
let socket = io('ws://localhost:3000/');
//发送信息给后端服务
document.getElementById('sendBtn').onclick = function () {
var text = document.getElementById('sendTxt').value;
if (text) {
socket.emit('message', text);
}
};
//进入聊天室
socket.on('enter', function (data) {
showMessage(data, 'enter')
});
//获得消息
socket.on('message', function (data) {
showMessage(data, 'message')
});
//离开聊天室
socket.on('leave', function (data) {
showMessage(data, 'leave')
});
//客户端渲染辅助函数
function showMessage(str, type) {
var div = document.createElement('div');
div.innerHTML = str;
if (type === 'enter') {
div.style.color = 'blue';
} else if (type === 'leave') {
div.style.color = 'red'
}
document.body.appendChild(div);
}
</script>
</body>
</html>
var app=require('http').createServer();
var io=require('socket.io')(app);
var port=3000;
var clientCount=0;//客户的个数
app.listen(port);
//开启socket.io的链接
io.on('connection',function(socket){
clientCount++;
socket.nickName='user'+clientCount;
//socket.emit()是想客户端发送信息,io.emit是想所有链接客户广播信息
io.emit('enter',socket.nickName+'comes in');
socket.on('message',function(str){
io.emit('message',socket.nickName+': '+str);
});
socket.on('disconnect',function(){
io.emit('leave',socket.nickName+' leave')
});
});
console.log('webSocket server listening on port '+port);
启动服务后,本地打开页面就可以访问了。