WebSocket入门

jiekechoo 发布于2019-08-26 13:39 / 3301人阅读

摘要：是开始提供的一种在单个连接上进行全双工通讯的协议。轮询是在特定的的时间间隔如每秒，由浏览器对服务器发出请求，然后由服务器返回最新的数据给客户端的浏览器。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

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

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

DEMO如下

// client side file

let socket = new WebSocket("ws://localhost:9999");

// 当连接成功执行回调函数
socket.onopen = function () {
  console.log("客户端连接成功");
  
  // 向服务器发送一个消息
  socket.send("这是客户端发给服务器的消息");
}

// 绑定事件是用加属性的方式
socket.onmessage = function (res) {
  console.log("收到服务器端的响应是", res);
}

// server side file
/* npm i ws -S */
/* 用ws模块启动一个websocket服务器,监听 9999 端口 */
let WebSocketServer = require("ws").Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on("connection", socket=>{
    console.log("服务器连接成功");
    socket.on("message", msg=>{
        console.log("从客户端接收到的信息为"+msg);
        socket.send("这是从服务器发送到客服端的信息");
    })
})

简单模拟智能客服聊天

const contents = ["你好", "hi", "hello", "nice to meet you", "how are you", "how do you do"]

let WebSocketServer = require("ws").Server; 
let wsServer = new WebSocketServer({port: 9999});

wsServer.on("connection", socket=>{
    console.log("服务器连接成功");
    socket.on("message", msg=>{
        console.log("从客户端接收到的信息为"+msg);
        socket.send(contents[parseInt(Math.random()*contents.length)]);
    })
})

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

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

慕课网_《Netty入门之WebSocket初体验》学习总结

时间：2018年04月11日星期三说明：本文部分内容均来自慕课网。@慕课网：https://www.imooc.com 教学源码：https://github.com/zccodere/s... 学习源码：https://github.com/zccodere/s... 第一章：课程介绍 1-1 课程介绍什么是Netty 高性能、事件驱动、异步非阻塞的IO Java开源框架基于NIO的客户...

Noodles 2019-08-15 15:30 评论0 收藏0
WebSocket系列之基础知识入门篇

摘要：概述本文是系列的第一篇，主要介绍相关的基础协议知识和。客户端收到响应后，立即发起下一次的请求。收到消息通过事件来接收消息。类型则需要传递一个对象作为参数，相关的内容也将在本系列第二篇中进行介绍。概述本文是WebSocket系列的第一篇，主要介绍WebSocket相关的基础协议知识和API。由于WebSocket的相关介绍在MDN中分布较乱，初学者不太容易入门，因此通过本文将相关基础...

Yuqi 2019-08-22 15:46 评论0 收藏0
websocket 之入门 (一)

摘要：长轮循长轮循是对定时轮询的改进和提高，目地是为了降低无效的网络传输。是规范的一部分，它是一种流技术，它的规范由两部分组成，第一个部分是服务器端与浏览器端之间的通讯协议，第二部分则是在浏览器端提供使用的对象。下一篇之客户端与服务器端的交互二 1. 长链接技术介绍说到websocket，必须讲到在它之前的各种长链接技术，比如轮循，长轮循，sse等。长链接顾名思义，就是让客户端浏览器与服务...

myshell 2019-08-19 18:24 评论0 收藏0
swoole——从入门到放弃（一）

摘要：进程可以使用函数向进程投递新的任务。当前的进程在调用回调函数时会将进程状态切换为忙碌，这时将不再接收新的，当函数返回时会将进程状态切换为空闲然后继续接收新的。当进程投递的任务在中完成时，进程会通过方法将任务处理的结果发送给进程。 swoole——从入门到放弃（一）一、swoole的源码包安装下载swoole源码：git clone https://gitee.com/swoole...

morgan 2019-07-01 12:27 评论0 收藏0