一、创建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. 关于连接linux被拒

    一.scp被拒 在服务器A命令行使用scp往服务器B传输,如: scp -i id_rsa_125 file1 user01@IP:/home #ssh_exchange_identification ...

  2. sublime 将打字内容放在屏幕中央

    在settings user里添加一句: "scroll_past_end": true

  3. CM记录-Cloudera Manager常见问题汇总（转载）

    1.无法加载最新的supervisord 解决方案:ps -ef | grep supervisord     kill -9 pid 2.cloudera-scm-agent dead but pi ...

  4. JAVA中初始化ArrayList的三种方式

    下面讲一下ArrayList初始化的几种不同方式. 一.最常用的初始化方式. List<String> list1 = new ArrayList<String>(); lis ...

  5. Dijkstra算法：任意两点间的最短路问题 路径还原

    #define _CRT_SECURE_NO_WARNINGS /* 7 10 0 1 5 0 2 2 1 2 4 1 3 2 2 3 6 2 4 10 3 5 1 4 5 3 4 6 5 5 6 9 ...

  6. Git 设置过滤忽略的文件或文件夹(ignore file)

    我们一般向代码仓库提交项目的时候,一般需要忽略编译生成的中间文件以及文件夹的提交,因为它们是无用的,而且也会占用仓库的空间.一般只用提交.pro,.sln,makefile,程序源文件等编译必须用到的 ...

  7. spring boot(十一)：Spring boot中mongodb的使用

    mongodb简介 传统的关系数据库一般由数据库(database).表(table).记录(record)三个层次概念组成, MongoDB是由数据库(database).集合(collection ...

  8. 淘淘商城之springmvc和mybatis整合

    一.需求 使用springmvc和mybatis完成商品列表查询 二.整合思路 springmvc+mybaits的系统架构: 第一步:整合dao层 mybatis和spring整合,通过spring ...

  9. 一、GPIO操作

    1.1 硬件原理图 四个引脚接到LED上,跟别是GPF4,GPF5,GPF6和GPF7,前三个引脚分别控制三个LED,GPF7此引脚作为DM9000网卡的中断. 发光二极管的正极接3.3V电源,负极接 ...

  10. luogu P3522 [POI2011]TEM-Temperature

    这道题暴力做法就是枚举每个起点,然后向后拓展到不能拓展 就像这样(红框是每个位置的取值范围,绿线是你取的值构成的折线) 应该可以发现,左端点往右移的过程中,右端点也只能不动或往右移,所以我们可以每次移 ...