✍13 websocket与socket_io

websocket

  • WebScoket是一种让客户端和服务器之间能进行双向实时通信的技术

  • 本质上是个基于TCP的协议,它通过HTTP/HTTPS协议发送一条特殊的请求进行握手后创建了一个TCP连接,此后浏览器/客户端和服务器之间便可以通过此连接来进行双向实时通信

  • (服务端主动向客户端推消息)

socket.io 框架

  • socket.io 是基于 Node.jsWebSocket 协议的实时通信开源框架

  • 它包括客户端的JavaScript和服务器端的Node.js

  • ???? WebSocket是SocketIO的一个子集 ???????(什么意思, 包含关系?)

    更新 :

    • WebSocket是HTML5最新提出的规范,虽然主流浏览器都已经支持,但仍然可能有不兼容的情况

    • 为了兼容所有浏览器,给程序员提供一致的编程体验,SocketIO将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口

    • 也就是说,我们在使用SocketIO时,不用担心兼容问题,底层会自动选用最佳的通信方式

    • 因此说,WebSocket是SocketIO的一个子集

emit(发送) 与 on(监听)

举个小栗子先入门了解, 后面详细学习

  • Socket.IO服务器具有一个sockets属性, 属性值为所有与客户端建立连接的socket对象
io.sockets  # 建立的所有客户端 socket 对象
  • 可以利用该对象的send方法或者emit方法向所有客户端广播消息
io.sockets.emit(‘String’,data);  # 给所有客户端广播消息 (第一个参数是名字,相对应on通信)
io.sockets.socket(socketid).emit(‘String’, data);  # 通过 socketid 给指定的客户端发送消息(听说已经不能用了)

image-20210727112335342

  • 然后在客户端监听 on (客户端和服务端反过来也是一样)

image-20210727113007017

io('url') 就可以得到一个socket对象, 再来看看dcs中的 js

image-20210727113329673

socket.on('String', function(data));  # 监听客户端发送的信息 

image-20210727113437178

Websocket 客户端

WebSocket, 属性, 事件, 方法

image-20210727115327865

示例 :

  • 创建一个websocket对象方法
var Socket = new WebSocket(url, [protocol] );  // protocol 是可选的,指定了可接受的子协议
  • 使用
// 初始化一个 WebSocket 对象
var ws = new WebSocket('ws://localhost:9998/echo');

// 建立 web socket 连接成功触发事件
ws.onopen = function() {
  // 使用 send() 方法发送数据
  ws.send('发送数据');
  alert('数据发送中...');
};

// 接收服务端数据时触发事件
ws.onmessage = function(evt) {
  var received_msg = evt.data;
  alert('数据已接收...');
};

// 断开 web socket 连接成功触发事件
ws.onclose = function() {
  alert('连接已关闭...');
};

Websocket服务端

image-20210727133803530

原文地址:https://www.cnblogs.com/songhaixing/p/15604773.html