1、新建package.json文件:

  1. {
  2. "name": "socket-chat-example",
  3. "version": "0.0.1",
  4. "description": "my first chat socket-chat-example",
  5. "dependencies": {
  6. "express": "^4.14.0",
  7. "socket.io": "^1.4.8"
  8. }
  9. }

2、新建index.js用于聊天服务:

  1. //使用express搭建web服务器
  2. var express = require("express");
  3. var app = express();
  4. var http = require("http").Server(app);
  5. //使用socket.io监听事件
  6. var io = require("socket.io")(http);
  7. //使用express发送css js等静态资源
  8. app.use(express.static("public"));
  9.  
  10. //index.html
  11. app.get("/",function(req,res){
  12. res.sendFile(__dirname + "/index.html");
  13. });
  14.  
  15. //socket.io监听事件
  16. io.on("connection",function(socket){
  17. console.log("a user connected");
  18. socket.on("disconnect",function(){
  19. console.log("a user disconnected");
  20. });
  21.  
  22. //实时监听chat message事件
  23. socket.on("chat message",function(msg){
  24. io.emit("chat message",msg);
  25. })
  26. });
  27.  
  28. //服务器监听开启
  29. http.listen(3000,function(){
  30. console.log("listening on *:3000");
  31. });

3、聊天页面index.html编写:

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Socket.IO chat</title>
  5. <style>
  6. * { margin: 0; padding: 0; box-sizing: border-box; }
  7. body { font: 13px Helvetica, Arial; }
  8. form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  9. form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  10. form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  11. #messages { list-style-type: none; margin: 0; padding: 0; }
  12. #messages li { padding: 5px 10px; }
  13. #messages li:nth-child(odd) { background: #eee; }
  14. </style>
  15. </head>
  16. <body>
  17. <ul id="messages"></ul>
  18. <form action="">
  19. <input id="m" autocomplete="off" /><button>Send</button>
  20. </form>
  21. <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  22. <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  23.  
  24. <script type="text/javascript">
  25. var socket = io();
  26. $('form').submit(function(){
  27. //点击发送按钮,提交输入的信息
  28. socket.emit('chat message', $('#m').val());
  29. $('#m').val('');
  30. return false;
  31. });
  32.  
  33. socket.on('chat message', function(msg){
  34. //将chat message显示在页面
  35. $('#messages').append($('<li>').text(msg));
  36. });
  37. </script>
  38. </body>
  39. </html>

具体参考:http://socket.io/

使用socket.io开发简单群聊功能的更多相关文章

  1. 使用socket.io实现简单的聊天功能

    Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法 首先得在你的项目中安装socket.io $ npm install socket.io 服 ...

  2. Java网络编程Demo,使用TCP 实现简单群聊功能GroupchatSimple,多个客户端输入消息,显示在服务端的控制台

    效果: 服务端 客户端 实现代码: 服务端 import java.io.IOException; import java.net.ServerSocket; import java.net.Sock ...

  3. NIO 实现简单群聊功能

    服务端: package com.yang.runnable; import java.io.IOException; import java.net.InetSocketAddress; impor ...

  4. Java网络编程Demo,使用TCP 实现简单群聊功能Groupchat,创建一个服务端,使多个客户端都能收到消息

    效果图: 开启服务端 客户端一 客户端二 客户端三 实现代码: 客户端类 import java.io.IOException; import java.net.ServerSocket; impor ...

  5. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程(三)

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  6. Java-->实现群聊功能(C/S模式--TCP协议)

    --> Java 对TCP协议的支持: --> java.net包中定义了两个类ServerSocket 和Socket ,分别用来实现双向连接的server 端和client 端. -- ...

  7. socket.io实现在线群聊

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: npm install socket.io 利用Node的搭 ...

  8. day04-1群聊功能

    多用户即时通讯系统04 4.编码实现03 4.5功能实现-群聊功能实现 4.5.1思路分析 群聊的实现思路和私聊的实现非常类似. 不同的是:私聊时,服务端接收到消息后,只需要找出接收方的socket并 ...

  9. 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能

    1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块  修改了start 脚本  nodemo ...

随机推荐

  1. mysql 命令行参数

    MySQL命令行参数 Usage: mysql [OPTIONS] [database] //命令方式  例如: mysql -h${HOSTNAME}  -P${PORT}  -u${USERNAM ...

  2. 关于hql一些不常见但好用的技巧(个人总结)

    最近一直在用spring-data-jpa这个东西,感觉方法上注解hql语句已经是很常用的方法了, 有一些关于hql的经验分享一下: 一.hql的join hql的优势就是直接的关联关系嘛,但是通过h ...

  3. zabbix使用sendEmail发送邮件报警

    sendEmail是一个轻量级,命令行的SMTP邮件客户端.如果你需要使用命令行发送邮件,那么sendEmail是非常完美的选择:使用简单并且功能强大.这个被设计用在php.bashperl和web站 ...

  4. strace命令介绍(转)

    原文链接:http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html 简介 strace常用来跟踪进程执行时的系统调用和所接收的信 ...

  5. 問題排查:沒有任何多載符合 System.Timers.ElapsedEventHandler 委派

    這是在實作當前專案最後一個關鍵功能:提醒通知 所遇到的奇怪狀況 目前的設想,是以 Windows Form 結合 Timer,當作發送通知的載體 大家都知道在 C# 的環境裡,有三種內建的 Timer ...

  6. 問題排查:F5啟動偵錯後所提示的錯誤 (1)

    原始專案版本:Visual Studio 2005 開發環境:Visual Studio 2013 偵錯運行環境:IIS Express 啟動偵錯後,錯誤提示內容如下: HTTP 错误 500.23 ...

  7. AutoResetEvent信号锁 waitone set 执行一次线程退出 挺不爽的地方

    下边有个 循环调用线程写奇偶数的程序 class TheadTest { //定义一个Stream对象接收打开文件 private FileStream st; //构造方法 public Thead ...

  8. 在UTF8(linux)下,逆置汉字字符串

    #include <stdio.h> int main() { char c[]="我是如此热爱编程!"; ,min=,max; while(c[index]) { i ...

  9. 2006Jam的计数法

    题目描述 Description Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用 ...

  10. 【kd-tree】bzoj2850 巧克力王国

    分四种情况讨论:a,b>=0 a,b<0 a>=0,b<0 a<0,b>=0 然后每次检验是否进入一个矩形框 或者 是否直接利用这个矩形框的答案 仅仅利用两个对角的 ...