WebSocket 学习笔记

来源：互联网发布：qq刷人气软件编辑：程序博客网时间：2024/05/28 11:50

关于 WebSocket

http 协议存在一个缺陷：通讯只能由客户端发起

如果服务器有连续的状态变化，客户端要获知就需要向服务器轮询，由于轮询的效率低，浪费资源。 WebSocket 因此而发明。

在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
这里写图片描述

关于 WebSocket 和 Socket 的联系和区别

这里写图片描述

WebSocket 特点

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

建立在 TCP 协议之上，服务器端的实现比较容易。
与 http 协议有着良好的兼容性，握手阶段采用 http 协议
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

Node.js 轻松实现 WebSocket服务

step1 : 安装 node.js

https://nodejs.org/en/

step2 : node install –save ws

安装 websocket 库 ws

step3 : 创建服务

在刚才安装 ws 库的更目录创建一个 server.js

var WebSocketServer = require('ws').Server;console.log('WebSocket Service running...');// 启动了一个监听 8181 端口的 websocket 服务 -> ws://localhost:8181wss = new WebSocketServer({ port: 8181 });wss.on('connection', function (ws) {    console.log('client connected');    ws.on('message', function (message) {        console.log(message);    });});

step4 : 启动服务

node server.js

step5 : Client 端

随意命名 client 端的名字，最终这个静态网页是直接打开的

<html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>WebSocket</title>    <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>    <script>    var ws = new WebSocket("ws://localhost:8181");    ws.onopen = function (e) {        console.log('Connection to server opened');    }    function sendMessage() {    console.log('Client send:' + $('#message').val() );        ws.send($('#message').val());    }    </script></head><body >    <input class="form-control" type="text" name="message" id="message" placeholder="Type text to echo in here" value="" />        <button type="button" id="send" class="btn btn-primary" onclick="sendMessage();">Send </button></body></html>

这里写图片描述

运行结果

这里写图片描述

阅读全文

0 0