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. Python学习之--socket

    1.Socket概述   网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为一个socket.socket通常也称作"套接字",用于描述IP地址和端口,是一个 ...

  2. Entity Framework Code First+SQL Server，改变聚集索引，提高查询性能

    .net Entity Framework(调研的是Entity Framework 4.0) code first方式生成数据库时,不能修改数据库表的索引,而SQLServer默认会把数据表的主键设 ...

  3. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  4. python掉微信api

    # -*- coding:utf-8 -*-import requestsimport jsonimport sys# 企业号及应用相关信息corp_id = 'xxxx'corp_secret = ...

  5. 运行期以索引获取tuple元素-C++14

    在编译期很容易根据索引来获取对应位置的元素,因为 tuple 的帮助函数 std::get<N>(tp) 就能获取 tuple 中第 N 个元素.然而我们却不能直接在运行期通过变量来获取 ...

  6. 使用CEF的JSON解析功能

    Cef提供了JSON解析功能,在cef_parser.h文件内有三个JSON相关的方法: CefParseJSON CefParseJSONAndReturnError CefWriteJSON 以最 ...

  7. Android开发之监听发出的短信

    执行效果图: 预备知识: 为了监听指定的ContentProvider的数据的改变,须要通过ContentResolver向指定Uri注冊CotentObserver监听器.ContentResolv ...

  8. [基础规范]JavaBeans规范

    本文来自维基百科:http://en.wikipedia.org/wiki/JavaBeans#JavaBean_conventions JavaBeans是Java语言中能够反复使用的软件组件,它们 ...

  9. java中模拟http(https)请求的工具类

    在java中,特别是java web中,我们经常需要碰到的一个场景是我们需要从服务端去发送http请求,获取到数据,而不是直接从浏览器输入请求网址获得相应.比如我们想访问微信接口,获取其返回信息. 在 ...

  10. Cannot open url. please check this url is correct

    启动tomcat报错如下 任务管理器 kill 掉所有java进程,在配置中选中After launch选项 要是还是不行,那就无解,只能重启电脑.