websocket--简易版

最新推荐文章于 2025-04-21 18:08:17 发布

原创最新推荐文章于 2025-04-21 18:08:17 发布 · 453 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#websocket

websocket 专栏收录该内容

1 篇文章

订阅专栏

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
WebSocket协议提供了一个用来替代HTTP轮询实现网页到远程主机的双向通信的方法。
但是服务器端没有标准的api, 使用websocket开发服务器端有一定的风险.可能会被锁定在某个平台上或者将来被迫升级。

一、搭建环境（node环境下）
命令：npm install nodejs-websocket
https://github.com/sitegui/nodejs-websocket

二、运行

var ws = require("nodejs-websocket");//引进模块

var PORT = 3000;
// Scream server example: "hi" -> "HI!!!"
var server = ws.createServer(function (conn) {
    //回调
    console.log("New connection");
    conn.on("text", function (str) {
        console.log("Received "+str)
        // conn.sendText(str.toUpperCase()+"!!!")
        //大写返回的输入的字符
        // conn.sendText(str.toUpperCase()+"!!!")
        conn.sendText(str)
    });
    conn.on("close", function (code, reason) {
        console.log("Connection closed")
    });
    conn.on("error", function (err) {
        console.log("handle err");
        console.log(err);
    })
}).listen(PORT);

console.log("websoket server listening on port"+PORT);
//创建服务

cmd 环境，找到根目录
node + 文件名

三、页面内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket--简易版</title>
</head>
<body>
<input type="text" id="txt">
<input type="button" id="btn" value="send">
<p id="rec"></p>
<script>
    var websocket = new WebSocket("ws://localhost:3000");//

    websocket.onopen = function () {
    //开启
        console.log("websocket open");
        document.getElementById("rec").innerHTML = "connected";
    };

    websocket.onclose = function () {
    //关闭
        console.log("websocket close");
        document.getElementById("rec").innerHTML = "close";
    }

    websocket.onmessage = function (e) {
    //传输
        console.log(e.data);
        document.getElementById("rec").innerHTML = e.data;
    };

    document.getElementById("btn").onclick=function () {
        var txt = document.getElementById("txt").value;
        websocket.send(txt);//发送
    }
</script>
</body>
</html>