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. php银联网页支付实现方法

         本文实例讲述了php银联网页支付实现方法.分享给大家供大家参考.具体分析如下: 这里介绍的银联WAP支付功能,仅限消费功能. 1. PHP代码如下: 复制代码代码如下: <?phpna ...

  2. 1、C#基础 - C# 语言简介

    C# 语言和 .NET Framework 介绍 C# 是类型安全的面向对象的精妙语言,可帮助开发者生成在 .NET Framework 上运行的各种安全可靠的应用程序. C# 可用于创建 Windo ...

  3. CSS的常见问题

    1.css的编码风格 多行式:可读性越强,但是CSS文件的行数过多,影响开发速度,增大CSS文件的大小 一行式:可读性稍差,有效减少CSS文件的行数,有利于提高开发速度,减小CSS文件的大小 2.id ...

  4. 教你如何用 lib-flexible 实现移动端H5页面适配

    前话 好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...

  5. 从零开始构建docker基础镜像

    段子 今年基本已经结束了,我问了很多朋友今年挣钱了没?大多朋友都有挣,而且挣得五花八门:有挣个屁的,有挣个锤子的,有挣个毛的,更有甚者挣个妹的,奢侈之极!最恐怖的是挣个鬼的!有的还可以,挣个球,下午我 ...

  6. linux crontab yum安装

    crontab工具来做计划任务,定时任务,执行某个脚本等等 1.检查是否已安装crontab # crontab -bash: crontab: command not found 执行 cronta ...

  7. linux进程标识符具体解释1

    每一个进程都有一个实际用户标识符和一个实际组标识符,它们永远是启动该进程之用户的用户标识符和组标识符. 进程的有效用户标识符和有效组标识符或许更重要些,它们被用来确定一个用户是否能訪问某个确定的文件. ...

  8. C++学习笔记24,方法重写与方法隐藏

    该博文仅用于交流学习.请慎用于不论什么商业用途.本博主保留对该博文的一切权利. 博主博客:http://blog.csdn.net/qq844352155 转载请注明出处: 方法重写.是指在子类中又一 ...

  9. Android查缺补漏--Activity生命周期和启动模式

    一.生命周期 onCreate():启动Activity时,首次创建Activity时回调. onRestart():再次启动Activity时回调. onStart():首次启动Activity时在 ...

  10. Mybatis中模糊查询的各种写法（转）

    . sql中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{text}), '%');或者 <if test ...