一、创建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. Java中FTPClient上传中文目录、中文文件名乱码问题解决方法【好用】

    转: Java中FTPClient上传中文目录.中文文件名乱码问题解决方法 问题描述: 使用org.apache.commons.net.ftp.FTPClient创建中文目录.上传中文文件名时,目录 ...

  2. win10下通过Anaconda安装TensorFlow-GPU1.3版本，并配置pycharm运行Mnist手写识别程序

    折腾了一天半终于装好了win10下的TensorFlow-GPU版,在这里做个记录. 准备安装包: visual studio 2015: Anaconda3-4.2.0-Windows-x86_64 ...

  3. 【Maven】eclipse中使用Maven、生命周期

    1.在eclipse中创建maven工程 >>在eclipse中配置maven: 配置maven版本:Eclips自带了一个maven,一般不用自带的这个,而选择我们安装的那个maven ...

  4. python类变量和实例变量的区别

    类变量:是为类服务的,类所有的实例都共享使用,在一个地方被改变,所有调用的地方变量值都改变.定义类时的写法为类名.变量名 实例变量:是在实例中生效的,每个实例变量的值都根据实例本身需求进行修改,不会影 ...

  5. grafana worldPing插件

    worldPing插件安装 官网介绍:https://grafana.com/plugins/raintank-worldping-app/installation 插件下砸地址:https://gr ...

  6. Java_myBatis_xml代理写法

    这种开发方式只需要写好Mapper.xml和对应的Interface就可以了. 1.编写Mapper.xml <?xml version="1.0" encoding=&qu ...

  7. pyautogui_pdf批量转换为TXT

    pyautogui_pdf批量转换为TXT, 用pdf自带无损转换 # -*- coding: utf-8 -*- """ Created on Thu May 5 15 ...

  8. Spring_bean的实例化时机

    前言:创建Java对象 public class User { private String name; private Integer age; public User() { System.out ...

  9. CentOS 使用 Xfce 桌面并通过 xrdp 登录

    基础环境 CentOS 7.1 最小化安装 安装步骤 以下步骤,均通过ssh连接到主机进行操作. 安装桌面支持 首先安装桌面支持 yum groupinstall "Server with ...

  10. POJ - 1426 Find The Multiple（搜索+数论）

    转载自:優YoU  http://user.qzone.qq.com/289065406/blog/1303946967 以下内容属于以上这位dalao http://poj.org/problem? ...