WebSocket入门教程(五)-- WebSocket实例:简单多人聊天室
from:https://blog.csdn.net/u010136741/article/details/51612594
【总目录】
【实例简介】
【效果图】
【客户端】
- <!DOCTYPE html>
- <html lang="cn">
- <head>
- <title>WebSocket chart application</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">
- <link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>
- <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>
- <script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>
- <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>
- <script>
- var ws= new WebSocket('ws://www.liumumu.top:8180');
- var nickname;
- ws.onopen = function(e){
- console.log('Connection to server opened');
- }
- function appendLog(type,nickname, message,clientcount) {
- var messages = document.getElementById('messages');
- var messageElem = document.createElement("li");
- var preface_label;
- if(type==='notification') {
- preface_label = "<span class=\"label label-info\">*</span>";
- } else if(type==='nick_update') {
- preface_label = "<span class=\"label label-warning\">*</span>";
- } else {
- preface_label = "<span class=\"label label-success\">" + nickname + "</span>";
- }
- var message_text = "<h2>" + preface_label + " " + message + "</h2>";
- messageElem.innerHTML = message_text;
- messages.appendChild(messageElem);
- var count_people = document.getElementById("count_people");
- count_people.innerHTML = clientcount;
- }
- ws.onmessage = function(e){
- var data = JSON.parse(e.data);
- nickname = data.nickname;
- appendLog(data.type,data.nickname, data.message,data.clientcount);
- console.log("ID: [%s] = %s", data.id, data.message);
- }
- function sendMessage(){
- var message = $('#message').val().trim();
- if(message.length<1){
- alert("不能发送空内容!");
- return;
- }
- ws.send($('#message').val());
- $('#message').val("");
- $('#message').focus();
- console.log(ws.bufferedAmount);
- }
- </script>
- </head>
- <body lang="cn">
- <div class="vertical-center">
- <div class="container">
- <h2>多人在线聊天DEMO</h2>
- <hr />
- <p>当前在线人数:<span id="count_people">0</span></p>
- <ul id="messages" class="list-unstyled">
- </ul>
- <hr />
- <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
- <div class="form-group">
- <input class="form-control" type="text" name="message" id="message"
- placeholder="输入聊天内容" value="" autofocus/>
- </div>
- <button type="button" id="send" class="btn btn-primary"
- onclick="sendMessage();">发送!</button>
- </form>
- </div>
- </div>
- </body>
- </html>
【服务器端】
- var WebSocket = require('ws');
- var WebSocketServer = WebSocket.Server,
- wss = new WebSocketServer({port: 8180});
- var uuid = require('node-uuid');
- var clients = [];
- function wsSend(type, client_uuid, nickname, message,clientcount) {
- for(var i=0; i<clients.length; i++) {
- var clientSocket = clients[i].ws;
- if(clientSocket.readyState === WebSocket.OPEN) {
- clientSocket.send(JSON.stringify({
- "type": type,
- "id": client_uuid,
- "nickname": nickname,
- "message": message,
- "clientcount":clientcount,
- }));
- }
- }
- }
- var clientIndex = 1;
- wss.on('connection', function(ws) {
- var client_uuid = uuid.v4();
- var nickname = "游客"+clientIndex;
- clientIndex+=1;
- clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});
- console.log('client [%s] connected', client_uuid);
- var connect_message = nickname + " 来了";
- wsSend("notification", client_uuid, nickname, connect_message,clients.length);
- ws.on('message', function(message) {
- if(message.indexOf('/nick') === 0) {
- var nickname_array = message.split(' ');
- if(nickname_array.length >= 2) {
- var old_nickname = nickname;
- nickname = nickname_array[1];
- var nickname_message = "用户 " + old_nickname + " 改名为: " + nickname;
- wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);
- }
- } else {
- wsSend("message", client_uuid, nickname, message,clients.length);
- }
- });
- var closeSocket = function(customMessage) {
- for(var i=0; i<clients.length; i++) {
- if(clients[i].id == client_uuid) {
- var disconnect_message;
- if(customMessage) {
- disconnect_message = customMessage;
- } else {
- disconnect_message = nickname + " 走了";
- }
- clients.splice(i, 1);
- wsSend("notification", client_uuid, nickname, disconnect_message,clients.length);
- }
- }
- }
- ws.on('close', function() {
- closeSocket();
- });
- process.on('SIGINT', function() {
- console.log("Closing things");
- closeSocket('Server has disconnected');
- process.exit();
- });
- });
我们定义了wsSend函数用来处理消息的广播。对每个连接的用户,我们默认给他分配为游客。为了实现广播,我们用clients数组来保存连接的用户。
WebSocket入门教程(五)-- WebSocket实例:简单多人聊天室的更多相关文章
- Spring WebSocket初探2 (Spring WebSocket入门教程)<转>
See more: Spring WebSocket reference整个例子属于WiseMenuFrameWork的一部分,可以将整个项目Clone下来,如果朋友们有需求,我可以整理一个独立的de ...
- PySide——Python图形化界面入门教程(五)
PySide——Python图形化界面入门教程(五) ——QListWidget 翻译自:http://pythoncentral.io/pyside-pyqt-tutorial-the-qlistw ...
- Elasticsearch入门教程(五):Elasticsearch查询(一)
原文:Elasticsearch入门教程(五):Elasticsearch查询(一) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...
- RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe)
原文:RabbitMQ入门教程(五):扇形交换机发布/订阅(Publish/Subscribe) 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. ...
- 无废话ExtJs 入门教程五[文本框:TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
- 转:Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)
Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...
- Scrapy安装、爬虫入门教程、爬虫实例(豆瓣电影爬虫)
Scrapy在window上的安装教程见下面的链接:Scrapy安装教程 上述安装教程已实践,可行.(本来打算在ubuntu上安装Scrapy的,但是Ubuntu 磁盘空间太少了,还没扩展磁盘空间,所 ...
- vue教程2-04 vue实例简单方法
vue教程2-04 vue实例简单方法 vue实例简单方法: vm.$el -> 就是元素 vm.$data -> 就是data <!DOCTYPE html> <htm ...
- 使用Servlet和JSP实现一个简单的Web聊天室系统
1 问题描述 利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...
随机推荐
- ASP.NET MVC源码分析系列
Controller下的JsonResult的ExecuteResult方法 public override void ExecuteResult(ControllerContext context) ...
- 【FinancialKnowledge】拨备
一句话: 银行拨备就是银行贷款损失减值准备的俗称,其相当于为承担风险和损失的金融资产计提的准备金 通俗易懂的解释见:https://wallstreetcn.com/articles/3307725
- struts 在Action中访问web元素(request,session等)
出发jsp: <?xml version="1.0" encoding="GB18030" ?> <%@ page language=&quo ...
- Ajax高级应用---Comet
非常适合处理体育比赛的分数和股票报价 1.HTTP流 将输出缓存中的内容一次性全部发送到客户端的功能是实现HTTP流的关键所在.
- MQTT Client软件-MQTTBox
最近发现了一个连接mqtt broker的软件:MQTTBox.GitHub地址:https://github.com/workswithweb/MQTTBox 官网网站的介绍为:使用MQTTBox增 ...
- hbase 批量插入api
1.数据格式a.txt: 1363157985066 13726230503 00-FD-07-A4-72-B8:CMCC 120.196.100.82 i02.c.aliimg.com 24 27 ...
- iOS 9应用开发教程之ios9中实现button的响应
iOS 9应用开发教程之ios9中实现button的响应 IOS9实现button的响应 button主要是实现用户交互的.即实现响应.button实现响应的方式能够依据加入button的不同分为两种 ...
- Struts2架构分析和执行机制
实例分析 1.在浏览器中输入url地址后,会通过http协议发送给tomcat,tomacat收到请求后查看訪问的是哪个 webapplication(例如以下图的Struts2_0100_Intro ...
- Asp.net2.0里的SessionPageStatePersister
备注: ASP.NET 页可在处理和提供任何网页所必需的原本无状态 HTTP 请求与响应之间存储 Page 状态信息.此状态称为“视图状态”. ASP.NET 的默认持久性机制是使用 HiddenFi ...
- SVN安装配置及安全注意事项
两个脚本: svn遍历脚本.zip wooyun上也是已经有非常多的svn泄露网站信息的事件,有的甚至由此导致整个服务器沦陷: WooYun: [盛大180天渗透纪实]第四章.SVN猎手 (某站SVN ...