webSocket协议(聊天室)

254 阅读3分钟

1)HTTP无法轻松实现实时应用:

1、 HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。

2、我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比如Ajax)。但是,反过来却是不可能的:服务器端发生了一个事件,服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候,所发生事件的信息才会从服务器传递到客户端。

2)以往解决实时应用方法

1、 长轮询:客户端每隔很短的时间,都会对服务器发出请求,查看是否有新的消息,只要轮询速度足够快,例如1秒,就能给人造成交互是实时进行的印象。这种做法是无奈之举,实际上对服务器、客户端双方都造成了大量的性能浪费。

2、长连接:客户端只请求一次,但是服务器会将连接保持,不会返回结果(想象一下我们没有写res.end()时,浏览器一直转小菊花)。服务器有了新数据,就将数据发回来,又有了新数据,就将数据发回来,而一直保持挂起状态。这种做法的也造成了大量的性能浪费。

3)WebSocket协议能够让浏览器和服务器全双工实时通信,互相的,服务器也能主动通知客户端了。

WebSocket的原理非常的简单:利用HTTP请求产生握手,HTTP头部中含有WebSocket协议的请求,所以握手之后,二者转用TCP协议进行交流(QQ的协议)。现在的浏览器和服务器之间,就是QQ和QQ服务器的关系了。

所以WebSocket协议,需要浏览器支持,更需要服务器支持。

  • 支持WebSocket协议的浏览器有:Chrome 4、火狐4、IE10、Safari5
  • 支持WebSocket协议的服务器有:Node 0、Apach7.0.2、Nginx1.3

4)socket官网

官网

5)在node中使用webSocket

1、npm install socket.io

var http = require('http);
var fs = require('fs');
var server = http.createServer((req,res)=>{
  if(req.url == '/'){
    fs.readFile('./index.html',(err,data)=>{
      if(err) throw err;
      res.writeHead(200,{'Content-Type':'text/html;charset=utf8'});
      res.end(data)
    })
  }
})
var io = require('socket.io')(server)
io.on('connection',(socket)=>{ //监听连接
//socket.on 监听前端的事件 接收msg
  socket.on('event',(msg)=>{
    console.log(msg)  //=>打印测试前台发送
    //返回一个事件给前端
    socket.emit('fanhui','这是后台返回的')
  })
})
server.listen(5000)

而当访问
http://localhost:5000/socket.io/socket.io.js
你会发现返回一个js代码 这是影藏的

//index.html
//引用
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();  //使用对象
socket.emit('event','测试前台发送') //发送给后台event事件
socket.on('fanhui',function(msg){
  console.log(msg)  //=> 打印这是后台返回的
})
</script>

6)聊天室制作利用socket的广播

原理就是每当一个人在后台(node)发生emit事件发送时 所有人都可以接收到

//nodejs
io.on('connection',(socket)=>{
  socket.on('接收前台的事件',(msg)=>{
    //只要前台任何人触发前台事件,所有人都可以接收到返回给前台的事件
    io.emit('返回前台的事件',msg)
  })
})