使用socket.io开发简单群聊功能
1、新建package.json文件:
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first chat socket-chat-example",
"dependencies": {
"express": "^4.14.0",
"socket.io": "^1.4.8"
}
}
2、新建index.js用于聊天服务:
//使用express搭建web服务器
var express = require("express");
var app = express();
var http = require("http").Server(app);
//使用socket.io监听事件
var io = require("socket.io")(http);
//使用express发送css js等静态资源
app.use(express.static("public")); //index.html
app.get("/",function(req,res){
res.sendFile(__dirname + "/index.html");
}); //socket.io监听事件
io.on("connection",function(socket){
console.log("a user connected");
socket.on("disconnect",function(){
console.log("a user disconnected");
}); //实时监听chat message事件
socket.on("chat message",function(msg){
io.emit("chat message",msg);
})
}); //服务器监听开启
http.listen(3000,function(){
console.log("listening on *:3000");
});
3、聊天页面index.html编写:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript">
var socket = io();
$('form').submit(function(){
//点击发送按钮,提交输入的信息
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
}); socket.on('chat message', function(msg){
//将chat message显示在页面
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
具体参考:http://socket.io/
使用socket.io开发简单群聊功能的更多相关文章
- 使用socket.io实现简单的聊天功能
Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法 首先得在你的项目中安装socket.io $ npm install socket.io 服 ...
- Java网络编程Demo,使用TCP 实现简单群聊功能GroupchatSimple,多个客户端输入消息,显示在服务端的控制台
效果: 服务端 客户端 实现代码: 服务端 import java.io.IOException; import java.net.ServerSocket; import java.net.Sock ...
- NIO 实现简单群聊功能
服务端: package com.yang.runnable; import java.io.IOException; import java.net.InetSocketAddress; impor ...
- Java网络编程Demo,使用TCP 实现简单群聊功能Groupchat,创建一个服务端,使多个客户端都能收到消息
效果图: 开启服务端 客户端一 客户端二 客户端三 实现代码: 客户端类 import java.io.IOException; import java.net.ServerSocket; impor ...
- 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
- Java-->实现群聊功能(C/S模式--TCP协议)
--> Java 对TCP协议的支持: --> java.net包中定义了两个类ServerSocket 和Socket ,分别用来实现双向连接的server 端和client 端. -- ...
- socket.io实现在线群聊
我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: npm install socket.io 利用Node的搭 ...
- day04-1群聊功能
多用户即时通讯系统04 4.编码实现03 4.5功能实现-群聊功能实现 4.5.1思路分析 群聊的实现思路和私聊的实现非常类似. 不同的是:私聊时,服务端接收到消息后,只需要找出接收方的socket并 ...
- 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能
1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块 修改了start 脚本 nodemo ...
随机推荐
- media type的类型汇总
用的比较多的是screen和print:区分打印和屏幕显示(Android,iPhone都不是手持设备handheld,都是screen设备)
- Java核心知识点学习----多线程 倒计时记数器CountDownLatch和数据交换的Exchanger
本文将要介绍的内容都是Java5中的新特性,一个是倒计时记数器---CountDownLatch,另一个是用于线程间数据交换的Exchanger. 一.CountDownLatch 1.什么是Coun ...
- python在不同层级目录import模块的方法
使用python进行程序编写时,经常会使用第三方模块包.这种包我们可以通过python setup install 进行安装后,通过import XXX或from XXX import yyy 进行导 ...
- coredump调试的使用
一,什么是coredump 跑程序的时候经常碰到SIGNAL 或者 call trace的问题,需要定位解决,这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止,并且在满 ...
- apache端口的修改
apache 这个web服务默认在80端口监听...如果你访问一个网站 http://www.baidu.com 则默认一个端口是80 1. 一台机器可以有 1-65535 号端口 2. ...
- UICollectionView进阶练习
上一篇中的干货看完,不觉感觉还是有点虚,今天我们来点实的,做了两个小DEMO,源码已放GitHub,主要是针对UICollectionView做了联系.第一个DEMO是针对UICollectionVi ...
- eclipse 快捷键保存在哪里
eclipse 快捷键文件地址:%Workspace%/.metadata/.plugins/org.eclipse.core.runtime /.settings/org.eclipse.ui.wo ...
- DataTime格式化大全(转载)
//c datetime 格式化 DateTime dt = DateTime.Now; Label1.Text = dt.ToString();//2005-11-5 13:21:25 Label2 ...
- hd2066一个人的旅行
Problem Description 虽然草儿是个路痴(就是在杭电待了一年多,居然还会在校园里迷路的人,汗~),但是草儿仍然很喜欢旅行,因为在旅途中 会遇见很多人(白马王子,^0^),很多事,还能丰 ...
- 鼠标模拟点击a标签
今天写程序遇到的,想要用鼠标模拟点击a标签 html代码如下: <a id="jump"></a> js代码如下: var page = ....; $(' ...