使用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 ...
随机推荐
- mysql 命令行参数
MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式 例如: mysql -h${HOSTNAME} -P${PORT} -u${USERNAM ...
- 关于hql一些不常见但好用的技巧(个人总结)
最近一直在用spring-data-jpa这个东西,感觉方法上注解hql语句已经是很常用的方法了, 有一些关于hql的经验分享一下: 一.hql的join hql的优势就是直接的关联关系嘛,但是通过h ...
- zabbix使用sendEmail发送邮件报警
sendEmail是一个轻量级,命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件,那么sendEmail是非常完美的选择:使用简单并且功能强大.这个被设计用在php.bashperl和web站 ...
- strace命令介绍(转)
原文链接:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html 简介 strace常用来跟踪进程执行时的系统调用和所接收的信 ...
- 問題排查:沒有任何多載符合 System.Timers.ElapsedEventHandler 委派
這是在實作當前專案最後一個關鍵功能:提醒通知 所遇到的奇怪狀況 目前的設想,是以 Windows Form 結合 Timer,當作發送通知的載體 大家都知道在 C# 的環境裡,有三種內建的 Timer ...
- 問題排查:F5啟動偵錯後所提示的錯誤 (1)
原始專案版本:Visual Studio 2005 開發環境:Visual Studio 2013 偵錯運行環境:IIS Express 啟動偵錯後,錯誤提示內容如下: HTTP 错误 500.23 ...
- AutoResetEvent信号锁 waitone set 执行一次线程退出 挺不爽的地方
下边有个 循环调用线程写奇偶数的程序 class TheadTest { //定义一个Stream对象接收打开文件 private FileStream st; //构造方法 public Thead ...
- 在UTF8(linux)下,逆置汉字字符串
#include <stdio.h> int main() { char c[]="我是如此热爱编程!"; ,min=,max; while(c[index]) { i ...
- 2006Jam的计数法
题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用 ...
- 【kd-tree】bzoj2850 巧克力王国
分四种情况讨论:a,b>=0 a,b<0 a>=0,b<0 a<0,b>=0 然后每次检验是否进入一个矩形框 或者 是否直接利用这个矩形框的答案 仅仅利用两个对角的 ...