一、创建websocket.js文件

步骤：

1、创建websocket.js文件，复制如下代码；

2、安装nodejs-websocket依赖；

3、该文件夹下命令行执行 node websocket.js;

var ws = require('nodejs-websocket');

console.log('开始建立连接...')

ws.createServer(function (conn) {

    conn.on('text', function (str) {

        console.log('浏览器给服务端收到的信息为:' + str)

        conn.sendText('服务器下发的内容=>'+str)

    })

    conn.on('close', function (code, reason) {

        console.log('关闭连接', code, reason)

    });

    conn.on('error', function (code, reason) {

        console.log('异常关闭', code, reason)

    });

}).listen(8001)

console.log('WebSocket建立完毕');

二、创建websocket.html页面

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <title>WebSocket</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style>

        body{

            width: 96%;

            margin-left: 2%;

            margin-top: 20px;

        }

    </style>

</head>

<body>

<div class="btn-group box" role="group" aria-label="...">

    <button type="button" class="btn btn-default">Oppo</button>

    <button type="button" class="btn btn-default">Vivo</button>

    <button type="button" class="btn btn-default">Apple</button>

</div>

<div class="page-header">

    <h5 class="info">服务器返回信息列表:</br></br></h5>

</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

    if (window.WebSocket) {

        var ws = new WebSocket('ws://127.0.0.1:8001');

        ws.onopen = function () {

            console.log('连接服务器成功!');

            ws.send('startting...');

        }

        ws.onclose = function () {

            console.log('服务器关闭');

        }

        ws.onerror = function () {

            console.log("连接出错");

        }

        ws.onmessage = function (e) {

            document.querySelector(".box").onclick = function (e) {

                ws.send('当前点击框的内容为:<font style="color:red;" >' + e.target.innerHTML+'</font>');

            }

            $('.info').append(e.data + '</br></br>');

        }

    }

</script>

</body>

</html>

当终端看到如图所示时，即可测试demo了

打开wesocket.html页面点击按钮测试双向通信

如上图即实验成果，就是这么简单！

Nodejs实现WebSocket通信demo的更多相关文章

  1. 基于nodejs的websocket通信程序设计

    网络程序设计无疑是nodejs + html最好用 一.nodejs的安装 1.在ubuntu上的安装 sudo apt install nodejs-legacy sudo apt install ...

  2. nodejs建立websocket通信

    依赖模块 nodejs-websocket 服务端 const ws = require('nodejs-websocket'); console.log('开始建立连接...'); const se ...

  3. nodejs+mongoose+websocket搭建xxx聊天室

    简介 本文是由nodejs+mongoose+websocket打造的一个即时聊天系统:本来打算开发一个类似于网页QQ类似功能的聊天系统,但是目前只是开发了一个模块功能 --- 类似群聊的,即一对多的 ...

  4. 把酒言欢话聊天，基于Vue3.0+Tornado6.1+Redis发布订阅(pubsub)模式打造异步非阻塞(aioredis)实时(websocket)通信聊天系统

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_202 "表达欲"是人类成长史上的强大"源动力",恩格斯早就直截了当地指出,处在蒙昧时代即低 ...

  5. 轻量级通信引擎StriveEngine —— C/S通信demo(2) —— 使用二进制协议 （附源码）

    在网络上,交互的双方基于TCP或UDP进行通信,通信协议的格式通常分为两类:文本消息.二进制消息. 文本协议相对简单,通常使用一个特殊的标记符作为一个消息的结束. 二进制协议,通常是由消息头(Head ...

  6. 通信服务器群集——跨服务器通信Demo（源码）

    对于一些基于TCP Socket的大型C/S应用来说,能进行跨服务器通信可能是一个绕不开的功能性需求.出现这种需求的场景类似于下面描述的这种情况. 假设,我们一台TCP应用服务器能同时承载10000人 ...

  7. C#(SuperWebSocket)与websocket通信

    原文:C#(SuperWebSocket)与websocket通信 客户端代码 点击可以查看一些关于websocket的介绍 <!DOCTYPE html> <html> &l ...

  8. js判断是否安装某个android app，没有安装下载该应用(websocket通信，监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...

  9. VC++ 6.0 C8051F340 USB PC侧通信 Demo

    // HelloWorld.cpp : Defines the entry point for the console application. // /*********************** ...

随机推荐

  1. double

    看double精度 和 数字经过计算后的最小精度

  2. 2018.10.2浪在ACM 集训队第三次测试赛

    2018.10.26 浪在ACM 集训队第三次测试赛 今天是暴力场吗???????可怕 题目一览表 来源 考察知识点 完成时间 A 1275 珠心算测试 NOIP 普及组 2014 暴力??? 201 ...

  3. MUI 样式按钮的禁用

    1)如果是button,input等标签,可以     .attr("disabled",true)或者.attr("disabled","disab ...

  4. DIV或者DIV里面的图片水平与垂直居中的方法

    <div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中 ...

  5. java集合复制和反转

    1.for循环方法: 2.System.arraycopy()方法: 3.Arrays.copyOf()方法: 4.Object.clone()方法: + View code /** * @autho ...

  6. JavaScript模板代码总结

    //中文input框对非中文的校验 var reg=/[^\u4E00-\u9FA5]/g; if (reg.test($("#jgqc").val())){ alert(&quo ...

  7. python自动化运维之路~DAY7

    python自动化运维之路~DAY7 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.客户端/服务器架构 C/S 架构是一种典型的两层架构,其全称是Client/Server,即 ...

  8. 通过lua栈了解lua与c的交互

    lua是如何执行的 其中分析.执行部分都是c语言实现的. lua与c的关系 lua的虚拟机是用c语言实现的,换句话说一段lua指令最终在执行时都是当作c语言来执行的,lua的global表,函数调用栈 ...

  9. java中数据字典的使用：

    数据字典:数据库中一个字段下存在多个值的情况(type:1:肉类  2:素菜类  3:服装类): 分析: 1:这种情况下往往需要新建一张表来对应type下面的字段,通常以---表名--字段名---字段 ...

  10. 让富文本编辑器支持复制doc中多张图片直接粘贴上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧? 我希望打开文档doc直接复制粘贴到富文本编辑器,直接发布 感觉这个似乎很困难 ...