一、下载Socketio
二、Socketio的连接
Socketio使用方法官方地址
1)服务器端
//服务器端代码
const io = require('socket.io')(app) //socketio对象 ,这句话应放在监听代码之后,否则会报错
io.on('connection',socket =>{
console.log('新用户连接了')
})
2)浏览器端
//只需要把包导进来
<script src="/socket.io/socket.io.js"></script>
<script>
//连接Socket服务,参数就是服务器地址,以3000端口为例
var socket = io('http://localhost:3000')
</script>
3)运行结果
三、Socketio的使用
主要包含两个方法
1)socket.emit()方法
socket.emit()方法表示触发某个事件
如果需要给浏览器发数据,需要触发浏览器注册的某个事件
//socket.emit()表示主动向浏览器发送数据
//参数1:事件的名字
socket.emit('send',{ name: 'zs' })
2)socket.on()方法
socket.on()表示注册某个事件
如果需要获取浏览器的数据,需要注册一个事件,等待浏览器触发
//接受发送过来的数据
socket.on('send',data =>{
console.log(data)
})
四、浏览器给服务器发数据
浏览器给服务器发数据,本质就是浏览器触发服务器监听的事件
1)代码示例
//服务器当中注册一个事件
io.on('connection',socket =>{
console.log('新用户连接了')
//参数1:事件名:任意
//参数2:获取到的数据
socket.on('haha',data =>{
console.log(data)
})
})
//以上代码为JS中的
//浏览器中触发这个事件,以下代码为HTML中的
//发送的数据不一定是字符串,像对象之类的都可以
<script>
//连接Socket服务,参数就是服务器地址
var socket = io('http://localhost:3000')
//触发!
socket.emit('hehe', {name:'zs',age:18})
</script>
2)结果展示
五、服务器给浏览器发数据
服务器给浏览器发数据,本质就是服务器触发浏览器监听的数据
1)代码示例
io.on('connection',socket =>{
console.log('新用户连接了')
//socket.emit方法表示给浏览器发送数据
//参数1:事件的名字
// socket.emit('send',{ name: 'zs' })
//参数1:时间名; 参数2:获取到的数据
socket.on('hehe',data =>{
console.log(data)
//send事件,为浏览器注册的事件!!!
socket.emit('send',data)
})
})
以上代码为JS中代码
//注册时间表示用来获取服务器端发送过来的数据,以下代码为HTML中代码
socket.on('send', function(data){
console.log(data)
})
2)结果展示
要想发送数据就触发某个方法,要想拿数据就监听一个事件就行