socketio单聊，群聊

一个简单的聊天程序，功能有单聊，群聊

页面如下所示：

Name后面跟的是当前登录人的名字，下方的列表是当前在线的用户，双击该用户名后，可以给该用户发送消息。再次双击同一用户，下方会显示给所有(All)人发消息。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>Demo Chat</title><link href="bootstrap.css" rel="stylesheet"><style>body {padding: 20px;}#console {height: 400px;overflow: auto;}.username-msg {color: orange;}.connect-msg {color: green;}.disconnect-msg {color: red;}.send-msg {color: #888}</style><script src="js/socket.io/socket.io.js"></script><script src="js/moment.min.js"></script><script src="http://code.jquery.com/jquery-1.10.1.min.js"></script><script>var userName = 'user' + Math.floor((Math.random() * 1000) + 1);var socket = io.connect('http://localhost:9092');socket.on('connect', function () {output('<span class="connect-msg">Client has connected to the server!</span>');addUser(userName);var jsonObject = {userName: userName};$('#myName').text(userName);socket.emit('login', jsonObject);});socket.on('users', function (data) {$("#users").empty();//先清空已有的用户，然后在添加所有的for (var i = 0; i < data.length; i++)addUser(data[i]);});socket.on('groupChatEvent', function (data) {output('<span class="username-msg"> groupChat ' + data.userName + ':</span> ' + data.message);});socket.on('chatEvent', function (data) {output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);});socket.on('disconnect', function () {output('<span class="disconnect-msg">The client has disconnected!</span>');});function sendDisconnect() {socket.disconnect();}function sendMessage() {var message = $('#msg').val();$('#msg').val('');var jsonObject;var toUser = $('#user').val();if (toUser == "All") {jsonObject = {userName: userName,message: message};socket.emit('groupChatEvent', jsonObject);} else {jsonObject = {userName: userName,message: message,toUser: toUser};socket.emit('chatEvent', jsonObject);output('<span class="username-msg"> chat ' + data.userName + ':</span> ' + data.message);}}function output(message) {var currentTime = "<span class='time'>" + moment().format('HH:mm:ss.SSS') + "</span>";var element = $("<div>" + currentTime + " " + message + "</div>");$('#console').prepend(element);}function addUser(userName) {var element = $("<div οndblclick='singleChat(this)'>" + userName + "</div>");$('#users').prepend(element);}function singleChat(div) {if($('#user').val()==div.innerText){$('#user').val("All").show();}else{$('#user').val(div.innerText).show();}}</script>
</head><h1>Chat</h1>
Name:<span id="myName"></span>
<br/><div class="container-fluid"><div class="row-fluid"><div class="span2"><div id="users"><div>test</div></div></div><div class="span10"><div id="console" class="well"></div><form class="well form-inline" οnsubmit="return false;"><input id="user" class="input-mini disabled" type="text" style="display: none" disabled><input id="msg" class="input-xlarge" type="text" placeholder="Type something..."/><button type="button" onClick="sendMessage()" class="btn">Send</button><button type="button" onClick="sendDisconnect()" class="btn">Disconnect</button></form></div></div>
</div></body></html>

package com.corundumstudio.socketio.demo;import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.DataListener;
import com.corundumstudio.socketio.listener.DisconnectListener;
import com.google.common.collect.BiMap;
import com.google.common.collect.HashBiMap;import java.util.ArrayList;public class ChatLauncher {private static BiMap<String,SocketIOClient> users = HashBiMap.create();private static ArrayList<String> userLists = new ArrayList<String>();public static void main(String[] args) throws InterruptedException {Configuration config = new Configuration();config.setHostname("localhost");config.setPort(9092);final SocketIOServer server = new SocketIOServer(config);server.addEventListener("groupChatEvent", ChatObject.class, new DataListener<ChatObject>() {@Overridepublic void onData(SocketIOClient client, ChatObject data, AckRequest ackRequest) {// broadcast messages to all clientsserver.getBroadcastOperations().sendEvent("groupChatEvent", data);}});server.addEventListener("chatEvent", ChatObject.class, new DataListener<ChatObject>() {@Overridepublic void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest){System.out.println(chatObject);SocketIOClient fromSocketIoClient = users.get(chatObject.getUserName());SocketIOClient toSocketIoClient = users.get(chatObject.getToUser());if(toSocketIoClient!=null){toSocketIoClient.sendEvent("chatEvent",chatObject);}if(fromSocketIoClient!=null){fromSocketIoClient.sendEvent("chatEvent",chatObject);}}});server.addEventListener("login", ChatObject.class, new DataListener<ChatObject>() {@Overridepublic void onData(SocketIOClient socketIOClient, ChatObject chatObject, AckRequest ackRequest) {users.put(chatObject.getUserName(),socketIOClient);userLists.add(chatObject.getUserName());server.getBroadcastOperations().sendEvent("users",userLists);}});server.addDisconnectListener(new DisconnectListener() {@Overridepublic void onDisconnect(SocketIOClient socketIOClient) {String userName = users.inverse().get(socketIOClient);userLists.remove(userName);users.remove(userName);server.getBroadcastOperations().sendEvent("users", userLists);}});server.start();Thread.sleep(Integer.MAX_VALUE);server.stop();}}

socketio单聊，群聊相关推荐

钉钉单聊/群聊机器人实现思路
钉钉官网文档:https://open.dingtalk.com/document/group/robot-overview 一.钉钉开发平台 1.申请机器人应用开发-企业内部开发-基础信息-机器人 ...
Springboot+netty+websocket 实现单聊群聊及用户鉴权
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.配置二.Netty服务 1. WsServer构建 2. ChannelInitializer构建 3. 自定义 ...
安卓开发环信即时通信,聊天软件-可实现单聊群聊
最近花了一个星期的时间在B站跟着老师学了环信即时聊天工具的使用附上学习网站:https://www.bilibili.com/video/BV1cW411V7yd?p=1 附上自己的代码 https ...
Android 视频直播视频通话会议单聊群聊视频处理美颜滤镜等第三方SDK资料整理
视频通话.视频直播.语音通话.视频录制播放各种处理等功能 1.容联云通讯 https://www.yuntongxun.com/api/im.html?ly=sem-baidu&qd=pc- ...
(3)websocket实现单聊和群聊
1 资源下载地址 http://download.csdn.net/detail/jianfpeng241241/9325049 2 群聊图 2.1 zhangsan 发给所有人的图 2.2 发送 ...
ios开发多人语音聊天_iOS 新手集成单聊、群聊、语音和视频通话的简述
最近项目中有涉及到即时通讯的功能,所用到的是环信3.1.5的sdk.下面就开始介绍其过程: (1)集成环信SDK: pod:pod 'HyphenateFullSDK' 手动:因为我们要使用到语音和视 ...
Android集成网易云IM实现单聊和群聊
本人一直对即时通信感兴趣,但是我的日常工作与这个没有任何接触,所以一直没有时间去看,去研究,刚好最近有点空闲时间,便乘机去学习了一些皮毛废话和客套话也不多说,先看效果界面做的比较丑,大家不要在意哦 ...
【uni-app】小程序实现微信在线聊天（私聊/群聊）
之前学习使用uni-app简单实现一个在线聊天的功能,今天记录一下项目核心功能的实现过程.页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端 ...
python开发微信群_Python编程：微信群聊程序的开发与进/线程知识汇总(附代码)
本文承接上篇文章的客户端-服务器聊天对话程序,进一步设计开发了微信群聊的python模拟程序,涉及的python知识点为:Python实战:聊天软件开发与TCP/Socket编程知识汇总(附代码)和 ...
微信获取好友公众号群聊的信息
使用之前的准备工作:安装 itchat API easy_install itchat 1 在使用个人微信的过程当中主要有三种账号需要获取,分别为: 好友公众号群聊 itchat为 ...

socketio单聊，群聊

socketio单聊，群聊相关推荐

最新文章

热门文章