首页手记 socket.io使用入门

socket.io使用入门

标签：

Html5 JavaScript CSS3

1.1、Socket.IO 是什么

Socket.IO是一个库，基于 Node.js 的实时应用程序框架。可以在浏览器和服务器之间实现实时，双向和基于事件的通信。

1.2、 socket.io有什么特点

易用性：socket.io封装了服务端和客户端，使用起来非常简单方便。
跨平台：socket.io支持跨平台，这就意味着你有了更多的选择，可以在自己喜欢的平台下开发实时应用。
自适应：它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5。

1.3 起源

WebSocket 的产生源于 Web 开发中日益增长的实时通信需求，对比基于 http 的轮询方式，它大大节省了网络带宽，同时也降低了服务器的性能消耗。

WebSocket 协议在2008年诞生，2011年成为国际标准。虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，就诞生SocketIO。

SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。

二、socketIO简单示例

2.1 初始化项目


mkdir socket

cd socket

npm init -y

2.2 安装依赖


npm install socket.io express path --save-dev 

OR 

yarn add socket.io express path --save-dev

2.3 使用Express

原因

websocket 依赖http服务器
我们需要创建一个http的服务器，提供握手，静态文件服务等功能

创建`app.js`文件


let express = require('express')

let path = require('path')

let app = express()

app.use(express.static(__dirname))

app.get('/', function(req, res) {

  res.sendFile(path.resolve(__dirname, 'index.html'))

})

let server = require('http').createServer(app)

server.listen(5050)



let io = require('socket.io')(server)



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

  console.log('客户端已经连接')

  socket.on('message', function(msg) {

    console.log(msg)

    socket.send('服务端 ' + msg)

  })

})

创建`index.html`文件


<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>webpack App</title>

  </head>

  <body>

    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/socket.io/socket.io.js"></script>

<script>

  window.onload = function () {

    var socket = io.connect('/');

    //监听与服务器端的连接成功事件

    socket.on('connect', function () {

      console.log('客服端连接成功');

    });

    // 客服端收到服务器发过来的消息后

    socket.on('message', function (message) {

      console.log('客服端接收消息 ' + message);

    });

    //监听与服务器端断开连接事件

    socket.on('disconnect', function () {

      console.log('断开连接');

    });

  };

</script>

  </body>

</html>

点击查看更多内容