WebSocket

WebSocket是一个协议，它是是基于TCP的一种新的网络协议，TCP协议是一种持续性的协议，和HTTP不同的是，它可以在服务器端主动向客户端推送消息。通过这个协议，可以在建立一个nodejs的服务器，然后所有的客户端都可以向服务器端发送消息，然后服务器端把这个消息广播出去，形成了一个类似于聊天室的东西。

客户端：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <title>websoket</title>

 </head>

 <body>

     <h1>chat room</h1>

     <input type="text" id="msg" />

     <button id="send">发送</button>

     <script type="text/javascript">

         var websocket = new WebSocket("ws://localhost:6666/");

         function showMsg(str){

             var div = document.createElement('div');

             div.innerHTML = str;

             document.body.appendChild(div)

         }

         websocket.onopen=function(){

             console.log("open");

             document.getElementById('send').onclick = function() {

                 var txt = document.getElementById('msg').value;

                 if (txt) {

                     websocket.send(txt);

                 }

             }

         }

         websocket.onclose = function() {

             console.log("close");

         }

         websocket.onmessage = function(e) {

             console.log(e.data);

             showMsg(e.data);

         }

     </script>

 </body>

 </html>

从我的服务器localhost:6666实例化一个新的websocket，然后打开他监听发送按钮，点击发送就把txt发送到服务器端，然后监听得到的消息，通过showMsg渲染到界面上去

服务器端(node.js)：

 var ws = require("nodejs-websocket")

 var port = 6666;

 var clientCount = 0;

 var server = ws.createServer(function (conn) {

     console.log("New connection")

     clientCount++

     conn.nickname = "user" + clientCount

     broadcast("******* "+conn.nickname + " comes in *******");

     conn.on("text", function (str) {

         console.log("Received "+str)

         broadcast(conn.nickname + " say: " + str)

     })

     conn.on("close", function (code, reason) {

         broadcast("******* " + conn.nickname + " left *******");

     })

     conn.on("error", function(err) {

         console.log("error: "+err);

     })

 }).listen(port)

 console.log("websocket server listening on " + port);

 function broadcast (str) {

     server.connections.forEach(function (connection) {

         connection.sendText(str)

     })

 }

之前要加载一下nodejs-websocket模块，来一个人就把计数器加1，然后给他设置名字，监听收到的消息text，有消息就执行broadcast，broadcast就是向所有的客户端广播新的消息

举个例子

这里是我服务器上的栗子，大家可以看看

http://www.xiedashuaige.cn/websocket.html

通过WebSocket实现一个简单的聊天室功能的更多相关文章

  1. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

  2. Netty学习笔记(四) 简单的聊天室功能之服务端开发

    前面三个章节,我们使用了Netty实现了DISCARD丢弃服务和回复以及自定义编码解码,这篇博客,我们要用Netty实现简单的聊天室功能. Ps: 突然想起来大学里面有个课程实训,给予UDP还是TCP ...

  3. 基于websocket实现的一个简单的聊天室

    本文是基于websocket写的一个简单的聊天室的例子,可以实现简单的群聊和私聊.是基于websocket的注解方式编写的.(有一个小的缺陷,如果用户名是中文,会乱码,不知如何处理,如有人知道,请告知 ...

  4. [SignalR]一个简单的聊天室

    原文:[SignalR]一个简单的聊天室 1.说明 开发环境:Microsoft Visual Studio 2010 以及需要安装NuGet. 2.添加SignalR所需要的类库以及脚本文件: 3. ...

  5. 用ServletContext做一个简单的聊天室

    这里主要是ServletContext的一个特性:ServletContext是一个公共的空间,可以被所有的客户访问.由此可见ServletContext比cookie和session的作用范围要大[ ...

  6. WebSocket介绍和一个简单的聊天室

    WebSocket是什么呢? WebSocket一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket通信协议于2011年被IETF定为标准RFC 6455,并被RFC7936所补充规范, ...

  7. ASP.NET Signalr 2.0 实现一个简单的聊天室

    学习了一下SignalR 2.0,http://www.asp.net/signalr 文章写的很详细,如果头疼英文,还可以机翻成中文,虽然不是很准确,大概还是容易看明白. 理论要结合实践,自己动手做 ...

  8. Netty学习笔记(六) 简单的聊天室功能之WebSocket客户端开发实例

    在之前的Netty相关学习笔记中,学习了如何去实现聊天室的服务段,这里我们来实现聊天室的客户端,聊天室的客户端使用的是Html5和WebSocket实现,下面我们继续学习. 创建客户端 接着第五个笔记 ...

  9. node实现一个简单的聊天室（认识一下socket）

    边学边理解node的高深,今天写了一个聊天室的demo,很简单,认识一下socket node服务端代码 var express = require('express'); var app = exp ...

随机推荐

  1. Java 代码学习之数组的初始化

    我们都很熟悉Java中的数组,它具有查询快,增删慢的特点.但是通常我们自认为很了解它的用法,却容易忽略一些小细节.今天通过一段代码来简单了解数组初始化中的一些我们容易忽略的地方. package da ...

  2. IDEA 无法运行Junit, 报错Class not found xxxx Empty test suite.

    网上搜了一圈没找到答案, 最后才发现是因为testmodule没有把class编译到主代码编译的路径.

  3. 如何设置html中img宽高相同-css

    最近项目中有一个问题,做一个响应式的盒子,随着屏幕的变化, 宽高一直保持相等,之前一直使用js动态设置,获取盒子的宽度来设置盒子高度. 但是加载时样式显示不是很好,后来直接用css实现. html部分 ...

  4. iScroll的简单使用

    今天是2017-1-18,每天进步一点点 今天主要来总结一下我在项目中遇到的关于iScroll的使用问题. 第一个是iscroll的初始化问题. --在页面资源(包括图片)加载完毕后100ms之后初始 ...

  5. constructor.prototype

    一个很好玩的小问题考大家对js的理解function alert (){}; ________________ // 填空 alert(1); 使1弹出  http://perfectionkills ...

  6. 基于跳跃表的 ConcurrentSkipListMap 内部实现（Java 8）

    我们知道 HashMap 是一种键值对形式的数据存储容器,但是它有一个缺点是,元素内部无序.由于它内部根据键的 hash 值取模表容量来得到元素的存储位置,所以整体上说 HashMap 是无序的一种容 ...

  7. mac cocos2dx android

    1. localhost:proj.android mxhd4$ ./build_native.sh 报错 Compile++ thumb  : cocosdenshion_static <= ...

  8. 【Espruino】NO.12 加速度传感器演示

    http://blog.csdn.net/qwert1213131/article/details/31035403 本文属于个人理解,能力有限,纰漏在所难免.还望指正! [小鱼有点电] [Espru ...

  9. 【C语言】统计数组中出现次数超过一半的数字

    //统计数组中出现次数超过一半的数字 #include <stdio.h> int Find(int *arr, int len) { int num = 0; //当前数字 int ti ...

  10. POJ 1469（裸二分匹配）

    COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 18993   Accepted: 7486 Descript ...