先来吐槽一下，想要找点技术文章真**不容易，全是**复制粘贴，还冒充原创。搜索一个ws实现websocket全是一样的。一个字都没变，我能说什么。最后想到搜索ws模块githup居然前两页没有，也是那些重复的文章，无力吐槽。推荐一个githup上面的https://github.com/websockets/ws#broadcast-example

先来看下我的成果：在谷歌和火狐浏览器上链接上websocet实现同步。

先贴上我的后台代码（nodejs）：

需要安装express模块、ws模块

 var express = require('express');

 var http = require('http');

 var WebSocket = require('ws');

 var app = express();

 app.use(express.static(__dirname));

 var server = http.createServer(app);

 var wss = new WebSocket.Server({server});

 wss.on('connection', function connection(ws) {

     console.log('链接成功！');

     ws.on('message', function incoming(data) {

         /**

          * 把消息发送到所有的客户端

          * wss.clients获取所有链接的客户端

          */

         wss.clients.forEach(function each(client) {

             client.send(data);

         });

     });

 });

 server.listen(8000, function listening() {

     console.log('服务器启动成功！');

 });

客户端代码：

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>在线聊天</title>

 </head>

 <body>

 <input type="text" onblur="wsServer.onopen(this.value)">

 <script>

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

  wsServer.onopen = function (e) {

      (typeof e == 'string') && wsServer.send(e);//向后台发送数据

  };

  wsServer.onclose = function (e) {//当链接关闭的时候触发

  };

  wsServer.onmessage = function (e) {//后台返回消息的时候触发

         console.log(e);

  };

  wsServer.onerror = function (e) {//错误情况触发

  }

 </script>

 </body>

 </html>

写的很简单，反正能运行就行。

node+ws模块实现websocket的更多相关文章

  1. node.js中ws模块创建服务端和客户端，网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  2. [转]【NODE】用WS模块创建加密的WS服务(WSS)

    [From] https://luojia.me/2015/07/21/%E3%80%90node%E3%80%91%E7%94%A8ws%E6%A8%A1%E5%9D%97%E5%88%9B%E5% ...

  3. node使用https，webSocket开启wss

    1. 前言 看WEBRTC教程时使用到WebSocket来传输信令,node端使用了ws库来实现,但在浏览器端http无法获取本地媒体,必须使用https,使用https后webSocket 不能使用 ...

  4. nodejs+expressjs+ws实现了websocket即时通讯,服务器和客户端互相通信

    nodejs代码 // 导入WebSocket模块: const WebSocket = require('ws'); // 引用Server类: const WebSocketServer = We ...

  5. 深入浅出node(2) 模块机制

    这部分主要总结深入浅出Node.js的第二章 一)CommonJs 1.1CommonJs模块定义 二)Node的模块实现 2.1模块分类 2.2 路径分析和文件定位 2.2.1 路径分析 2.2.2 ...

  6. Node.js模块

    每一个Node.js都是一个Node.js模块,包括JavaScript文件(.js).JSON文本文件(.json)和二进制模块文件(.node). mymodul.js function Hell ...

  7. 如何发布一个自定义Node.js模块到NPM（详细步骤）

    咱们闲话不多说,直接开始! 由于我从没有使用过MAC,所以我不保证本文中介绍的操作与MAC一致. 文章开始我先假定各位已经在window全局安装了Node.js,下面开始进行详细步骤介绍: 本文本着, ...

  8. 编写原生Node.js模块

    导语:当Javascript的性能需要优化,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...

  9. 编写原生的Node.js模块

    导语:当Javascript的性能遭遇瓶颈,或者需要增强Javascript能力的时候,就需要依赖native模块来实现了. 应用场景 日常工作中,我们经常需要将原生的Node.js模块做为依赖并在项 ...

随机推荐

  1. 用DW制作简单的浮动广告

    原文发布时间为:2008-11-08 -- 来源于本人的百度文章 [由搬家工具导入] 浮动广告可以用层和时间轴结合做出，先选择你的dreamweaver“窗口”，然后从“窗口”菜单中选择“时间轴”，时 ...

  2. 洛谷——P2872 [USACO07DEC]道路建设Building Roads

    P2872 [USACO07DEC]道路建设Building Roads 题目描述 Farmer John had just acquired several new farms! He wants ...

  3. POJ 1780 【手工递归】【欧拉回路】

    题意: 1.提供密码的位数. 2.密码的输入可以一直保持,取后n位作为密码.如果密码正确则开锁. 3.设计一种方法使得在输入最少的情况下破译.(即保证每个密码只输入一次) 4.输出输入的数字的序列. ...

  4. jquery 关于ajax 及其son

    <%@ page language="java" pageEncoding="UTF-8"%><%@include file="/c ...

  5. Jmeter参数Parameters和Body Data区别

    1.如图: 2.有文章说,Parameters是get的参数:Body Data是post的参数:get的参数存在于url中,post的参数存在于body中:   但是我使用jmeter3.3版本测试 ...

  6. struts2 自己定义表单

    自己定义表单一定会涉及<s:iterator/>迭代,一个复杂的自己定义表单可能会嵌套n多层迭代. 比方一个自己定义一个问卷调查页面涉及3个模型:一个Survey代表一个调查.一个Page ...

  7. ffm算法

    www.csie.ntu.edu.tw/~cjlin/papers/ffm.pdf  读书笔记 The effect of feature conjunctions(组合特征) is difficul ...

  8. day5-WordCount

    1.   wordcount示例开发 1.1. wordcount程序整体运行流程示意图 map阶段: 将每一行文本数据变成<单词,1>这样的kv数据 reduce阶段:将相同单词的一组k ...

  9. 使用python在极坐标中生成一条直线

    在测试雷达时,往往需要测试雷达的数据是否准确,这时就需要在雷达图中显示一条标准的直线作为对比. "create a wall" import numpy as np import ...

  10. ARGB,RGB颜色值表示

    转载请注明出处:http://blog.csdn.net/wei_chong_chong/article/details/50831493 今天自己定义一个控件.设置背景颜色时犯难了 如今就来总结一下 ...