websocket学习和群聊实现

fantix 发布于2019-08-26 12:16 / 811人阅读

摘要：协议可以实现前后端全双工通信，从而取代浪费资源的长轮询。而就可以使得前后端进行全双工通信两方都可以向对方进行数据推送，是真正的平等对话。

WebSocket协议可以实现前后端全双工通信，从而取代浪费资源的长轮询。在此协议的基础上，可以实现前后端数据、多端数据，真正的实时响应。在学习WebSocket的过程中，实现了一个简化版群聊，过程和代码详细记录在这篇文章中。

本篇文章来自董沅鑫的个人网站，引用、转载请指明出处。

查看更多知识，或者技术交流：请访问godbmw.com

1 概述 1.1 WebSocket 是什么？

建立在 TCP 协议之上的网络通信协议

全双工通信协议

没有同源限制

可以发送文本、二进制数据等

1.2 为什么需要 WebSocket？

了解计算机网络协议的人，应该都知道：HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。

这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户端发起消息。

因此，如果在客户端想实时监听服务器变化，必须使用 ajax 来进行轮询，效率低，浪费资源。

而 websocket 就可以使得前后端进行全双工通信（两方都可以向对方进行数据推送），是真正的平等对话。

2 WebSocket 客户端

支持HTML5的浏览器支持 WebSocket 协议：

var ws = new WebSocket(url); // 创建一个websocket对象

2.1 WebSocket 属性

属性	描述
ws.readyState	只读属性 readyState 表示连接状态，可以是以下值：0 - 表示连接尚未建立。1 - 表示连接已建立，可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。
ws.bufferedAmount	只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

2.2 WebSocket 方法

属性	描述
ws.send()	数据发送
ws.close()	关闭连接

2.3 Websocket 事件

属性	描述
open	连接建立触发
message	通信时触发
error	出错触发
close	关闭连接触发

2.4 代码实现

假设我们在本地8080端口打开了websocket服务，那么，下面代码可以在浏览器中实现和这个服务的通信：

3 WebSocket 服务端

关于服务端实现，根据技术选型不同，可以选用不同的库和包。我这里使用的是node的ws库来websocket服务端。

在阮一峰的博文提到的socket.io库，在浏览器端的写法不兼容原生API，准确来说，它们自己实现了一套websocket。所以，使用的时候前后端都应该引用第三方库。这样就造成了代码迁移性，严重下降。

综上所述，ws库有以下优点：

兼容性好，兼容浏览器原生API

长期维护，效果稳定

使用方便（往下看就知道了）

4 实现群聊 4.1 群聊服务端实现

首先，在命令行中，安装ws库: npm install ws --save

现在，利用ws来实现一个监听8080端口的websocket服务器，讲解都在代码注释里，一目了然：

const PORT = 8080; // 监听端口
const WebSocket = require("ws"); // 引入 ws 库

const wss = new WebSocket.Server({ port: PORT }); // 声明wss对象

/**
 * 向除了本身之外所有客户端发送消息，实现群聊功能
 * @param {*} data 要发送的数据
 * @param {*} ws 客户端连接对象
 */
wss.broadcastToElse = function broadcast(data, ws) { 
  wss.clients.forEach(function each(client) {
    if (client !== ws && client.readyState === WebSocket.OPEN) {
      client.send(data);
    }
  });
};

/* 客户端接入，触发 connection */
wss.on("connection", function connection(ws, req) {
  let ip = req.connection.remoteAddress; // 通过req对象可以获得客户端信息，比如：ip，headers等

  /* 客户端发送消息，触发 message */
  ws.on("message", function incoming(message) { 
    ws.send(message); // 向客户端发送消息
    wss.broadcastToElse(message, ws); // 向 其他的 客户端发送消息，实现群聊效果
  });

});

4.2 群聊客户端实现

为了方便编写，这里引入了jquery和bootstrap这两个库，只需要关注js代码即可。

4.3 群聊效果展示

首先启动我们的服务端代码：node server.js 。其中，server.js是放置服务端代码的文件。

然后，我们打开2次编写的html代码，这相当于，打开2个客户端。来检测群聊功能。

5. 相关资料

概念解释：

http://www.ruanyifeng.com/blo...

https://www.cnblogs.com/jingm...

ws文档：https://www.npmjs.com/package/ws

本篇文章来自董沅鑫的个人网站，引用、转载请指明出处。

查看更多知识，或者技术交流：请访问godbmw.com

GPU云服务器云服务器 websocket 实现webrtc websocket 实现即时通讯 tomcat实现websocket websocket实现聊天室

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108362.html

Swoole WebSocket 的应用

摘要：概述这是关于学习的第三篇文章的应用。第二篇的应用第一篇的应用什么是是一种在单个连接上进行全双工通信的协议。如果想了解的知识，请看第二篇的应用。温馨提示本仅仅是简单的实现，如需应用到真实场景中还要多做优化。概述这是关于 Swoole 学习的第三篇文章：Swoole WebSocket 的应用。第二篇：Swoole Task 的应用第一篇：Swoole Timer 的应用什么...

Wildcard 2019-07-01 12:46 评论0 收藏0
netty搭建web聊天室（2）群聊

摘要：上节课完成了的后端搭建，搞定了简单的请求响应，今天来结合前端来完成群聊功能。其实后端群聊很简单，就是把一个用户的输入消息，返回给所有在线客户端，前端去负责筛选显示。上节课完成了netty的后端搭建，搞定了简单的http请求响应，今天来结合前端websocket来完成群聊功能。话不多说先上图：showImg(https://segmentfault.com/img/bVbnCa8?w=...

microelec 2019-08-16 14:42 评论0 收藏0
React系列——websocket群聊系统在react的实现

摘要：前奏这篇文章仅对不熟悉在中使用的人以及入门者有帮助。基本介绍想要实现一种实时的双向通信聊天系统，你可能会想到轮询长或短，但你最想要的还是的实现。客户端的实现端的实现，才是我们应该关注的重点。前奏这篇文章仅对不熟悉在react中使用socket.io的人、以及websocket入门者有帮助。下面这个动态图展示的聊天系统是用react+express+websocket搭建的，很模糊...

Acceml 2019-08-22 11:17 评论0 收藏0
InChat一版，仅仅两个接口实现自己的IM系统（可兼容）

摘要：大家明天一起去唱吧关于数据库设计当前一版不会固定大家的数据库设计，大家可以自己自由设计，同时搭上自己的项目，构建一个附带的自项目。 InChat 一个IM通讯框架一个轻量级、高效率的支持多端（应用与硬件Iot）的异步网络应用通讯框架。（核心底层Netty） Github：InChat 版本目标：完成基本的消息通讯（仅支持文本消息），离线消息存储，历史消息查询，一对一聊天、自我聊天、群...

CrazyCodes 2019-08-16 13:59 评论0 收藏0