socket.io封装了多种实时通信技术, 提供统一的API, 如果浏览器不支持WebSocket也可以平稳退化成其它的:
可以说WebSocket提供了一直方法,socketIO则是这个方法的应用,封装了WebSocket,因此个人暂时觉得比WebSocket好用
1、首先用cmd打开控制台 输入npm install socket.io:用于服务器require使用
2、下载socket.io.js(去socket.io官网下载就好了):用于客户端使用
3、编写服务器:
wsServer.js
//创建一个http服务器
var app = require('http').createServer()
// 把http封装成io对象
var io =require('socket.io')(app)
var PORT = 3000
var clientCount = 0
app.listen(PORT)
io.on('connection',function(socket){
// 给每个用户取名字
clientCount++
socket.nickname = 'user' + clientCount
// io.emit代表广播,socket.emit代表私发
io.emit('enter',socket.nickname + ' comes in')
socket.on('message',function(str){
io.emit('message',socket.nickname + ' says: ' + str)
})
// 客户端断开,自带事件
socket.on('disconnect',function(){
io.emit('leave',socket.nickname + ' left')
})
})
代码的一些说明:
1、socket表示传入的一个连接,io表示所有的连接
2、io.on(‘事件’,function(数据))表示触发事件执行function()处理客户端传入的数据
3、io.emit(‘事件’,数据),表示向所有客户端发送一个事件和数据
4、如果是一个就用socket.on和socket.emit()
4、编写客户端:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSocket</title>
<script type="text/javascript" src="socket.io.js"></script>
</head>
<body>
<h1>Chat Room</h1>
<input id="sendTxt" type="text"/>
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
var socket = io("ws://localhost:3000/");
//把接收的数据显示到界面
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)
}
// 点击之后发送
document.getElementById("sendBtn").onclick = function(){
var txt = document.getElementById("sendTxt").value;
if(txt){ // 文本不为空发送
socket.emit('message',txt);
}
}
// 第一个enter代表是进入事件,第二个enter为了显示需要
socket.on('enter',function(data){
showMessage(data,'enter')
})
socket.on('message',function(data){
showMessage(data,'message')
})
socket.on('leave',function(data){
showMessage(data,'leave')
})
</script>
</body>
</html>
代码的一些说明:
1、引入socket.io.js
2、用io()创建连接
3、和服务端一样,用on(),emit()发送和接收数据
5、对比使用WebSocket的优点:
好处1、可以直接发送一个字符串,不用像WebSocket那样先把对象转化为字符串发送,然后再转化回来 // socketIO好处2、发送自定义的事件,不需要去定义type这个属性