一、创建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. 提高磁盘访问性能 - NtfsDisableLastAccessUpdate

    这个技巧可以提高磁盘访问性能,不过仅适用于NTFS文件系统. 我们知道,当在磁盘管理应用程序中列出目录结构时──效果类似“资源管理器”.“文件管理 器”(Windows NT  3.xx/4.0下的称 ...

  2. 超详细从零记录Hadoop2.7.3完全分布式集群部署过程

    超详细从零记录Ubuntu16.04.1 3台服务器上Hadoop2.7.3完全分布式集群部署过程.包含,Ubuntu服务器创建.远程工具连接配置.Ubuntu服务器配置.Hadoop文件配置.Had ...

  3. java基础基础总结----- 关键字、标识符、注释、常量和变量、运算符、语句、函数、数组（三）

    Java语言基础组成:关键字.标识符.注释.常量和变量.运算符.语句.函数.数组 一．标识符 标识符是在程序中自定义的一些名称,由大小写字母[a-zA-Z],数字[0-9],下划线[ _ ],特殊字符 ...

  4. GO语言的进阶之路-go的程序结构以及包简介

    GO语言的进阶之路-go的程序结构以及包简介 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.编辑,编译和运行 A,编辑 Go程序使用UTF-8编码的纯Unicode文本编写.大 ...

  5. on条件与where条件的区别

    数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: 1. on条件是在生成临时表时使用的条 ...

  6. Spark记录-SparkSQL远程操作MySQL和ORACLE

    1.项目引入mysql和oracle驱动 2.将mysql和oracle驱动上传到hdfs 3.远程调试源代码如下: import org.apache.spark.sql.SQLContext im ...

  7. jquery blockui 遮罩【转】

    参考 : http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/ blockUI.html blockUI.ht ...

  8. Linux 命令详解（九）轻易删除OpenSSL 的后果

    警告自己,不要轻易的去删除系统的软件 1.composer自动更新出现错误 www@TinywanAliYun:~/web/go-study-line$ composer self-update Ke ...

  9. JAVA泛型中的类型擦除及为什么不支持泛型数组

    一,数组的协变性(covariant array type)及集合的非协变性 设有Circle类和Square类继承自Shape类. 关于数组的协变性,看代码: public static doubl ...

  10. 下拉框combobox用法&级联餐单

    如果下来内容不用后台取数据,直接写死的话不用url属性,直接用data即可: <input id="orderstate" name="orderstate&quo ...