基于socket实现的聊天室

2020-07-19 loading

# WebSocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。该协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。

它的最大特点:

  • 服务器可以主动向客户端推送信息
  • 客户端也可以主动向服务器发送信息
  • 是真正的双向平等对话,属于服务器推送技术的一种
  • 能更好的节省服务器资源和带宽,并且能够更实时地进行通讯

出现websocket协议的原因:

  • HTTP 协议有一个缺陷:通信只能由客户端发起
  • 实现推送技术,大多数网站使用的都是 Ajax 轮询,这样会浪费很多的带宽等资源

下面,我们对比一下Ajax轮询和websocket的区别: Ajax轮询和websocket的区别

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

# WebSocket客户端API

# WebSocket 构造函数

var Socket = new WebSocket(url, [protocol] );  

# WebSocket 属性

# webSocket.readyState

只读属性 readyState 表示连接状态,可以是以下值

  • 0 - 表示连接尚未建立
  • 1 - 表示连接已建立,可以进行通信。
  • 2 - 表示连接正在进行关闭。
  • 3 - 表示连接已经关闭或者连接不能打

# Socket.bufferedAmount

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

# WebSocket 事件

  • Socket.onopen,连接建立时触发
  • Socket.onmessage,客户端接收服务端数据时触发
  • Socket.onerror,通信发生错误时触发
  • Socket.onclose,连接关闭时触发

# WebSocket 方法

  • Socket.send(),使用连接发送数据
  • Socket.close(),关闭连接

# 实例

var ws = new WebSocket("wss://echo.websocket.org");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};  

# 基于socke.io实现一个聊天室

参考项目(opens new window)
http://socket-io-chat.yaya12.com/(opens new window)

# 学习资料

菜鸟websocket(opens new window)

socket.io官网(opens new window)

socket.io w3cschool.cn(opens new window)