web Socket 和Socket.IO框架

最新推荐文章于 2024-05-28 09:56:24 发布

胡鹤婷

最新推荐文章于 2024-05-28 09:56:24 发布

阅读量403

点赞数

分类专栏： webservice接口文章标签： socket

本文链接：https://blog.csdn.net/hhthwx/article/details/78887128

版权

webservice接口专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTTP无法轻松实现实时应用：
1.HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接
2.我们可以非常轻松的捕获浏览器上发生的事件（如用户点击盒子），这个事件可以轻松产生与服务器的交互（比如：Ajax）。但是反过来确实不可能的：服务器端发生了一件事情，服务器无法将这个事情的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生的信息才会从服务器传递到客户端。

但是确实存在聊天室，如何实现？
方法1：长轮询：客户端每隔很短的事件都会向服务器发送请求，查看是否有新的消息，只要轮询的速度足够快，例如：一秒，就能够给人造成实时交互的印象。但是这种做法实际上对客户端和服务器都造成了大量的性能浪费。
方法2：长连接：客户端只请求一次，但是服务器连接会保持，不会返回结果，服务器有了新数据就会将数据发送回来，又有了新数据，就将数据发送回来，而且一直保持着挂起状态。这种做法也造成了性能浪费。

html5新技术webSocket协议：

原理

利用HTTP请求产生握手，HTTP头部含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。那么现在的浏览器个服务器之间的关系就是QQ和QQ服务器的关系。
所以WebSocket协议需要浏览器和服务器的支持才可以使用。
支持WebSocket协议的浏览器有：Chrome4,火狐4，IE10,Safari5
2支持WeSocket协议的服务器有：Node 0，Apach 7.0.2,Nginx1.3

使用websocket：
1.安装socket.io

npm install -save socket.io

2.服务器端的配置
当server被创建出来之后，语句：

var io = require('socket.io')(server);

能够实例化io对象，此时网址/socket.io/socket.io.js将被默认提供一个静态JS服务文件

监听：

io.on("connection",function(socket){

})

3.客户端配置
1.HTML页面必须运行在服务器上，不能为本地
2.HTML页面需要引用/socket.io/socket.io.js文件，然后执行io函数，并得到socket对象

socket对象有emit方法和on方法。emit方法用于方法一个自定义事件，on方法用于监听服务器发送到额自定义事件。

案例：
服务器端JS代码：

var http = require("http");
var fs = require("fs");
var server = http.createServer(function (req,res) {
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    if(req.url == "/"){
      fs.readFile("./index.html",function (err,data) {
        res.end(data);
     });
   }
})
var io = require("socket.io")(server);
io.on("connection",function(){
  socket.on("tiwen",function(msg){
    console.log("本服务其收到一个提问："+msg);
    socket.emit("huida","哈哈哈，我不是，你才是.");
})

客户端代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h3>我是index页面，我引用了秘密script文件</h3>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();
    socket.emit("tiwen","你是猴子搬来的救兵吗？");
    socket.on("huida",function (msg) {
        alert("服务器说"+msg);

    })
</script>

</body>
</html>

广播概念：给当前所有连接的用户发送信息：
上面例子中服务器端的代码

io.on("connection",function(socket){
  socket.on("tiwen",function(msg){
    console.log("本服务其收到一个提问："+msg);
    socket.emit("huida","哈哈哈，我不是，你才是.");
})

回调函数中的参数socket是每一个连接上来的用户都有一个socket。由于我们的emit语句是由socket.emit发出来的，所以是指向这个客户端发出的语句。
广播代码：

io.on("connection",function (socket) {
    console.log("1个客户端连接了");
    socket.on("tiwen",function (msg) {
        //msg代表收到的提问的信息
       console.log("本无服务器收到一个提问"+msg);
       //广播代码
       io.emit("huida",msg);
    })

利用广播实现简易聊天室：
前台页面

<input type="text" value="" id="wenben">
<input type="button" value="聊天室" id="btn">
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket = io();
    //点击按钮向服务器发出提问
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        socket.emit("tiwen",document.getElementById("wenben").value);
    }
    //实时监听服务器的回答
    socket.on("huida",function (msg) {
        console.log(msg);
    })
</script>

服务器端：

var http = require("http");
var fs = require("fs");
var server = http.createServer(function (req,res) {
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    if(req.url == "/"){
        fs.readFile("./index.html",function (err,data) {
            res.end(data);
        });
    }
})
var io = require('socket.io')(server);

io.on("connection",function (socket) {
    console.log("1个客户端连接了");
    socket.on("tiwen",function (msg) {
        //将收到的提问的内容发送给客户端
       io.emit("huida",msg);
    })
})

server.listen(3000,"127.0.0.1");

胡鹤婷

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web Socket 和Socket.IO框架

HTTP无法轻松实现实时应用： 1.HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接 2.我们可以非常轻松的捕获浏览器上发生的事件（如用户点击盒子），这个事件可以轻松产生与服务器的交互（比如：Ajax）。但是反过来确实不可能的：服务器端发生了一件事情，服务器无法将这个事情的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生的信息才会
复制链接

扫一扫

专栏目录