一、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);
启动服务后,本地打开页面就可以访问了。