WebSocket 【实用教程】

简介: WebSocket 【实用教程】

WebSocket简介

WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信,位于OSI模型的应用层。

特点

  • TCP连接,与HTTP协议兼容
  • 双向通信,主动推送(服务端向客户端)
  • 无同源限制,协议标识符是ws( 加密wss)

应用场景

  • 聊天,消息,点赞
  • 直播弹幕、评论
  • 游戏、协同编辑、基于位置的应用

前端库

  • 【推荐】ws(实现原生协议,特点: 通用、性能高,定制性强)
  • socket.io(向下兼容协议,特点:适配性强、性能一般

创建 WebSocket 服务端

新建文件夹 server,终端运行

cnpm init -y

初始化项目

安装 ws 库

cnpm i -S ws

新建项目启动文件 server\index.js

const WebSocket = require("ws");
// 在指定端口上,创建WebSocket服务
const wss = new WebSocket.Server({ port: 3001 });
// 客户端连接到服务器的回调
wss.on("connection", function connection(ws) {
  console.log("一个客户端已连接");
  // 服务端接收客户端的消息
  ws.on("message", function (msg) {
    console.log("服务端接收到来自客户端的消息:" + msg);
  });
  // 服务端发消息给客户端
  ws.send("你好,客户端,我是服务端!");
});

启动项目

node server/index.js

创建 WebSocket 客户端

方法1:使用原生WebSocket

在html的js中执行

var ws = new WebSocket("ws://127.0.0.1:3001");

即可与WebSocket服务器建立连接

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 与服务端建立WebSocket长连接
      var ws = new WebSocket("ws://127.0.0.1:3001");
      // 客户端发送消息给服务端
      ws.onopen = function () {
        ws.send("你好,服务端,我是客户端!");
      };
      // 客户端接收到服务端的消息
      ws.onmessage = function (event) {
        console.log(event.data);
      };
    </script>
  </body>
</html>

方法2:使用ws

新建文件夹 client,终端运行

cnpm init -y

初始化项目

安装 ws 库

cnpm i -S ws

新建项目启动文件 client\index.js

// 导入ws库
const WebSocket = require("ws");
// 与服务端建立WebSocket长连接
const ws = new WebSocket("ws://127.0.0.1:3001");
ws.on("open", function () {
  console.log("node客户端成功连接到服务器");
  // 客户端发送消息给服务端
  ws.send("你好,服务端,我是node客户端!");
  // 客户端接收到服务端的消息
  ws.on("message", function (msg) {
    console.log("node客户端接收到服务端的消息:" + msg);
  });
});

启动项目

node client/index.js
目录
相关文章
|
2月前
|
前端开发 网络协议
netty整合websocket(完美教程)
本文是一篇完整的Netty整合WebSocket的教程,介绍了WebSocket的基本概念、使用Netty构建WebSocket服务器的步骤和代码示例,以及如何创建前端WebSocket客户端进行通信的示例。
195 2
netty整合websocket(完美教程)
|
2月前
|
网络协议 前端开发 JavaScript
WebSocket 教程汇总指南,从入门到熟练
本文将带你从零开始,逐步掌握 WebSocket 的基本概念、实现方法和应用场景,通过一系列详细的教程和实践案例,帮助你从入门到熟练地使用 WebSocket 技术。无论你是初学者还是有一定经验的开发者,本文都能为你提供有价值的信息和指导。
|
5月前
|
XML JSON Go
Swoole与Go系列教程之WebSocket服务的应用
在 WebSocket 协议出现之前,Web 应用为了能过获取到实时的数据都是通过不断轮询服务端的接口。轮询的效率、延时很低,并且很耗费资源。
1059 2
Swoole与Go系列教程之WebSocket服务的应用
|
6月前
|
JavaScript 前端开发 Java
蓝易云 - Java现实WebSocket教程
以上就是在Java中实现WebSocket的基本步骤。
29 1
|
前端开发 Java Maven
springboot整合websocket最基础入门使用教程详解
springboot整合websocket最基础入门使用教程详解
3520 0
springboot整合websocket最基础入门使用教程详解
|
移动开发 JavaScript 前端开发
WebSocket 详解教程 上
WebSocket 详解教程 上
520 0
WebSocket 详解教程    上
|
XML 移动开发 Java
WebSocket 详解教程 下
WebSocket 详解教程 下
318 0
|
消息中间件 JSON JavaScript
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
1865 0
Springboot 整合Websocket+Stomp协议+RabbitMQ做消息代理 实例教程
|
XML 前端开发 JavaScript
SpringBoot如何整合WebSocket? | 带你读《SpringBoot实战教程》之四十一
WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。
SpringBoot如何整合WebSocket? | 带你读《SpringBoot实战教程》之四十一
|
JSON 前端开发 小程序
Websocket直播间聊天室教程 - GoEasy快速实现聊天室
近期线上直播非常的火爆,很多朋友问如何用GoEasy实现直播间聊天室,然后我们就推出了这一篇直播间教程,希望能够为有直播间聊天室开发需求的开发者提供参考思路。
Websocket直播间聊天室教程 - GoEasy快速实现聊天室