socket.io的一些理解

最新推荐文章于 2023-01-23 20:14:54 发布

Angeladaddy007

最新推荐文章于 2023-01-23 20:14:54 发布

阅读量223

点赞数

分类专栏： node

本文链接：https://blog.csdn.net/qq_40086435/article/details/107006802

版权

node 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

socket.io

WebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。

Socket.IO由两部分组成：

一个服务端用于集成（可挂载）到Node.js HTTP服务器：socket.io
一个加载到浏览器中的客户端：socket.io-client

上文源自：https://blog.csdn.net/feng98ren/article/details/86240287

这里我们通过与express结合来实现一个简单的聊天功能：

1、创建一个空目录：socket_demo
2、终端执行express -e创建express架构
3、yarn install
4、yarn add socket.io --dev
5、在根目录创建socket.js 用于存放服务端代码

module.exports = (io) => {
  io.on('connection', socket => {
    socket.on('chat message', (msg) => {
      // broadcast, 广播的数据自己不可见
      socket.broadcast.emit('chat message', msg.username + '说：' + msg.message);

      // io.emit，所有用户可见
      // io.emit('chat message', msg.message)
    });
  })
}

5、找到/bin/www

var app = require('../app');
var debug = require('debug')('socket.io:server');
var http = require('http');

var socket = require('../socket')//获取服务端控制文件

var server = http.createServer(app);//创建http服务实例

var io = require('socket.io')(server)//创建socket.io实例并带入http服务

socket(io)//将io实例代入服务端控制文件

6、创建html页面

使用emit(eventName,data)，发送数据，第一个参数为自定义的事件名称；第二个参数为要发送的数据；
使用on(eventName,fn)，接收数据，第一个参数为发送时的事件名称；第二个参数是一个回调函数，它的参数为接收到的数据；

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: 0.5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="./javascripts/socket.io.js"></script>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input type="text" id="username" name="username" value="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script>
      $(function () {
        var socket = io();
        //建立io
        $('form').submit(function(e) {
        //表单提交函数
          e.preventDefault(); // prevents page reloading
          socket.emit('chat message', {//emit 发送数据
            username: $('#username').val(),//获取input内容
            message: $('#m').val()
          });
          $('#m').val('');
          return false;
        });
        socket.on('chat message', (msg) => {//on 
          console.log(msg)
          $('#messages').append($('<li>').text(msg));
        })
      });
    </script>
  </body>
</html>

这里直接通过yarn start 来启动，可以完成一个简单的聊天室

Angeladaddy007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
socket.io的一些理解

socket.ioWebSocket是HTML5最新提出的规范，虽然主流浏览器都已经支持，但仍然可能有不兼容的情况，为了兼容所有浏览器，给程序员提供一致的编程体验，SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口，也就是说，我们在使用SocketIO时，不用担心兼容问题，底层会自动选用最佳的通信方式。因此说，WebSocket是SocketIO的一个子集。Socket.IO由两部分组成：一个服务端用于集成（可挂载）到Node.js HTTP服务器：socke
复制链接

扫一扫

专栏目录