一、创建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. Access,MSSQL：随机读取N条记录

    今天试着将一个网站使用的mssql转换为Access,但网站首页有一段代码是随机读取n条记录: SQL Server:Select TOP N * From TABLE Order By NewID( ...

  2. A*算法（附c源码）

    关于A*算法网上介绍的有很多,我只是看了之后对这个算法用c写了一下,并测试无误后上传以分享一下,欢迎指正!下面是我找的一个介绍,并主要根据这个实现的. 寻路算法不止 A* 这一种, 还有递归, 非递归 ...

  3. MUI 拍照或选取照片上传作为头像

    1.第一种方法是用H5来实现的 HTML: <label> <input style="opacity: 0;" type="file" ac ...

  4. 红外条码扫描器的另类使用C#版

    3年前写了一篇<USB口的红外条形码扫描器的另类使用>,不过相关代码是VB编写,在这几年之间,有许多网友提出需要C#版的,起初还以为由VB修改C#应该很容易,最近研究了一下,发现C#和VB ...

  5. Git，Github和Gitlab简介和基本使用

    什么是Git Git是一个版本控制系统(Version Control System,VCS). 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统. 多年前,我在法国做第一 ...

  6. PHP 进行支付宝开发中return_url和notify_url的区别分析

    在支付宝处理业务中return_url,notify_url是返回些什么状态呢,我们要根据它来做一些处理就必须了解return_url,notify_url的区别,下面我就来给大家介绍; 一.问题描述 ...

  7. HTML5 元素拖拽实现 及 jquery.event.drag插件

    如上图片: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  8. FastReport动态绑定只显示一条数据。

    产生这个问题的原因是因为需要把Band绑定DataSource.有两种方法 (1)DataBand data = report1.Report.FindObject("Data1" ...

  9. Python排序算法之冒泡排序

    冒泡排序 顾名思义,冒泡排序直观的意思是气泡越大冒的越快:),对应到我们的列表中就是数字最大的先选出来,然后依次进行.例如 myList = [1,4,5,0,6],比较方式为: 相邻的两个数字先进行 ...

  10. android 不同Activity之间数据传递

    1. 传值Activity package mydemo.mycom.demo2; import android.content.Intent; import android.support.v7.a ...