用Socket.IO写一个本地聊天室

原创 2018年04月17日 14:52:12

最近用socket写了一个聊天室 ,刚学socket.io的同学们可以进文档扒一扒API

贴上socket.io文档地址:https://socket.io/get-started/chat/

如果要创建的话

首先新建一个项目文件夹Socket,在控制台输入:  npm init -y   会生成一个page.json文件

安装express、Socket.IO :cnpm install express --save   cnpm install socket.io --save-dev


成功后,我们接着在Socket下面创建一个public文件夹和一个 app.js(public和app.js是并级的)

目录是这样的:

在public写一个index.html , 内容贴上(一定要引入jquery 我这里引入的是3.2.1)

<!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="/socket.io/socket.io.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        var socket = io();
        //显示信息
        function appendMessage(msg) {
            $("#messages").append("<li>"+msg+"</li>");
        }
        //发送信息
        $("button").on("click",function () {
            var msg=$("#m").val();
            socket.emit("chat message",msg);
            appendMessage(msg);
            $("#m").val("");
            return false;
        });
        //收到新消息
        socket.on("chat message",function (msg) {
            appendMessage(msg);
        })
    })
</script>
</body>
</html>

app.js里写

var express=require("express");
var app=express();
var path=require("path");
var http=require("http").Server(app);
var io = require('socket.io')(http);
app.use(express.static(path.join(__dirname,"public")));
app.get('/', function(req, res){
    res.sendFile(__dirname + '/public/index.html');
});

//客户端连接
io.on("connection",(socket)=>{
    console.log('客户端连接', socket.id);
    //客户端断开连接
    socket.on("disconnect",()=>{
        console.log("客户端断开连接");
    });
    //客户端发来信息
    socket.on("chat message",(msg)=> {
        console.log(msg);
        socket.broadcast.emit("chat message",msg);
    })
});
http.listen(3006,()=>{
    console.log("listening on*:3006");
});


这个时候,我们需要安装一个自动运行(目的是不需要每次npm start)

在命令行里输入:cnpm install nodemon --save  

成功后,将package.json里的scripts加上一个start,就好了

我们就可以运行了。npm start

io.emit所有人都能看见
socket.emit只有发消息的本人能看见
socket.boardcast.emit除了自己以外的其他人能看见     

一个最最最基础的聊天室就好了。可以多打开几个窗口,模拟不同用户有的对话。

端口是 :   http://localhost:3006/


贴上Demo地址 :  https://github.com/shaolinhui/socket

这个demo里比较完善,已经git上去了,大家也可以去看看,都会有注释

功能的话:

1、增加了昵称

2、增加了私聊

3、增加用不同样式区分系统信息还是私聊以及添加发送时间

4、用户昵称冲突及显示用户在线列表

5、地存储用户昵称

如果运行的话,先cnpm install   然后在npm start ,就可以看效果了吐舌头


使用socket.io做一个简单的WEB聊天室

使用socket.io做一个简单的WEB聊天室(可消息私发)1. 创建一个空的工程目录空的目录命名为chat-web2. 创建package.json使用命令:npm init,会引导你设置packa...
  • u012685794
  • u012685794
  • 2016-12-10 13:19:19
  • 1453

利用socket.io实现多人聊天室(基于Nodejs)

socket.io简介在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的...
  • Newpidian
  • Newpidian
  • 2016-04-02 12:15:28
  • 6553

使用socket.io打造公共聊天室

最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室。实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室。...
  • three_bird
  • three_bird
  • 2016-05-08 10:40:36
  • 3178

使用node.js和socket.io实现多人聊天室

转自:http://www.cnblogs.com/flyoung2008/archive/2012/07/19/2600132.html 一、基本功能 1、用户随意输入一个昵称即可登录 2、登录...
  • shmnh
  • shmnh
  • 2015-01-24 03:24:54
  • 1960

nodejs socket.io 聊天室

阅读目录 需求分析Node.jsSocket.IO安装Node.js搭建WebSocket服务端服务端代码实现客户端代码实现 Web领域的实时推送技术,也被称作Realtime技术。这种技术要...
  • xy2204
  • xy2204
  • 2015-11-30 16:49:55
  • 1547

Node.js+socket.io在线聊天室

Node.js+socket.io实现在线聊天室,照着这个教程做的,稍加改动即可实现。        Node.js:0.10.31        Express:3.* 创建工程chat: ...
  • dongsoso
  • dongsoso
  • 2014-09-01 16:57:20
  • 1440

Node.js+Socket.IO实现的WebSocket群聊天室源码

首先上图上实例   聊天室地址:http://chat.52itstyle.com WebSocket简介 谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,...
  • zhulin2012
  • zhulin2012
  • 2016-07-13 16:33:36
  • 2520

linux利用管道来实现本地聊天室

//server.c#include "Packet.h" #include #include #include #include #include #include #include ...
  • Mrack
  • Mrack
  • 2015-12-19 09:20:59
  • 1013

Node.js websocket 使用 socket.io库实现实时聊天室

认识websocketWebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。其实websock...
  • HaoDaWang
  • HaoDaWang
  • 2017-02-20 12:53:26
  • 9967

Socket.io在线聊天室

原帖地址:http://blog.fens.me/nodejs-socketio-chat/ 将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发。...
  • comhaqs
  • comhaqs
  • 2014-04-16 09:55:21
  • 1694
收藏助手
不良信息举报
您举报文章:用Socket.IO写一个本地聊天室
举报原因:
原因补充:

(最多只允许输入30个字)