socket.io实现前后端通信——聊天室制作

一、网络请求原理

一般情况下网络请求应用最多的是 HTTP请求，但是 HTTP 无连接的：有请求才会有响应，如果没有请求，服务器想主动推送信息给浏览器是不可能的。

图文篮球直播、聊天室原理，我们用HTTP实现的话，一般会用长轮询的方法：

setInterval(function(){
    $.get();
},1000);

定时器外加 AJAX 请求来访问服务器数据是否发生改变。

WebSocket 是 HTML5中 的新协议。需要服务器和浏览器共同支持，实现全双工通信（bi-direction）。

简单来讲就是服务器由原来的被动被访问，变成现在主动下发新消息。

二、socket.io官例实现

socket.io 的官方网站有个实例，就是聊天室的案例。虽然是全英文的，但是我还是花了小半天自己动手实践跑了一下，第一次全英文的英文文档阅读下来还是很刺激的，收获不小，对英文的抵触又减少了一点。以后多读读可以提升英文水平。

先介绍这次 demo 用到的技术。socket.io 是借助 node.js 才能跑起来的。所以必须的安装node.js 掌握node技术，会使用 npm。外加前端的三驾马车。会以上知识就可以跑起来了。

npm :https://www.npmjs.com/package/socket.io

• 安装socket.io 和 express
  npm install --save socket.io express

• 官网案例代码
  socket.io 官网：https://socket.io/

  
    
    
  
  
    

    

      Send
    
  

复制js连接的代码

//引入express模块制作路由
var express = require('express');
var app = express();
//创建服务器使用的
var http = require('http').createServer(app);
//socket 负责全双工通信
var io = require('socket.io')(http);

//网站首页
app.get('/', function(req, res){
    //绝对化路径
  res.sendFile(__dirname + '/index.html');
});
//全双工通信建立
io.on('connection', function(socket){
  console.log('一个用户连接了');
});
//网站的监听端口号
http.listen(500);

要想前后端收发数据还的在 index.html添加如下代码：

我们知道node没有自动静态路由器的功能，但此代码是自动静态化的 。

可以访问本地网站测试：http://127.0.0.1:500/socket.io/socket.io.js

socket.io

想找到这个包还有一种方法：在node_modules 里面原文如下

If you would like to use the local version of the client-side JS file, you can find it at node_modules/socket.io-client/dist/socket.io.js.

直接 node index.js 访问网本地测试网站：http://127.0.0.1:500/
成功连接

如下：

为了接下来的演示还的在引入一个 JQuery包。

• 发送数据
  后端index.js 增加socket.on 监听前端发送的数据

io.on('connection', function(socket){
  console.log('一个用户连接了');
  // 监听前端info 发送的数据
  socket.on("info",function(data){
    // 收到的内容发送回去
    io.emit("fasong",data.content);
  });
  //用户断开连接的提示
  socket.on('disconnect', function(){
    console.log('一个用户离开了！');
  });
});

前端 index.html 使用 emit 发送数据到服务端

结果：浏览器分屏访问

image.png

结果